chore: resize after toggling subtitle

Author: ghiscoding

src/app/examples/grid-additem.component.html

@@ -14,12 +14,12 @@ <h2>
       class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
       type="button"
       data-test="toggle-subtitle"
-      (click)="hideSubTitle = !hideSubTitle"
+      (click)="toggleSubTitle()"
     >
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
   </h2>
-  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
 
   <div class="col-sm-12">
     <span>

src/app/examples/grid-additem.component.ts

@@ -295,4 +295,11 @@ export class GridAddItemComponent implements OnInit {
   scrollGridTop() {
     this.angularGrid.slickGrid.navigateTop();
   }
+
+  toggleSubTitle() {
+    this.hideSubTitle = !this.hideSubTitle;
+    const action = this.hideSubTitle ? 'add' : 'remove';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+    this.angularGrid.resizerService.resizeGrid(2);
+  }
 }

src/app/examples/grid-angular.component.html

@@ -14,12 +14,12 @@ <h2>
       class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
       type="button"
       data-test="toggle-subtitle"
-      (click)="hideSubTitle = !hideSubTitle"
+      (click)="toggleSubTitle()"
     >
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
   </h2>
-  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
 
   <div class="col-sm-6">
     <label>autoEdit setting: </label>

src/app/examples/grid-angular.component.ts

@@ -408,4 +408,11 @@ export class GridAngularComponent implements OnInit {
     const item = this.angularGrid.dataView.getItem(rowNumber);
     this.angularGrid.gridService.deleteItemById(item.id);
   }
+
+  toggleSubTitle() {
+    this.hideSubTitle = !this.hideSubTitle;
+    const action = this.hideSubTitle ? 'add' : 'remove';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+    this.angularGrid.resizerService.resizeGrid(2);
+  }
 }

src/app/examples/grid-clientside.component.html

@@ -14,12 +14,12 @@ <h2>
       class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
       type="button"
       data-test="toggle-subtitle"
-      (click)="hideSubTitle = !hideSubTitle"
+      (click)="toggleSubTitle()"
     >
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
   </h2>
-  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
 
   <br />
   <span *ngIf="metrics" style="margin-right: 10px">

src/app/examples/grid-clientside.component.ts

@@ -355,4 +355,11 @@ export class GridClientSideComponent implements OnInit {
   scrollGridTop() {
     this.angularGrid.slickGrid.navigateTop();
   }
+
+  toggleSubTitle() {
+    this.hideSubTitle = !this.hideSubTitle;
+    const action = this.hideSubTitle ? 'add' : 'remove';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+    this.angularGrid.resizerService.resizeGrid(2);
+  }
 }

src/app/examples/grid-composite-editor.component.html

@@ -15,7 +15,7 @@ <h2>
       class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
       type="button"
       data-test="toggle-subtitle"
-      (click)="hideSubTitle = !hideSubTitle"
+      (click)="toggleSubTitle()"
     >
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
@@ -24,7 +24,7 @@ <h2>
       <span>Toggle Dark Mode</span>
     </button>
   </h2>
-  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
 
   <div class="mb-2">
     <div class="btn-group btn-group-sm" role="group" aria-label="Basic Editing Commands">

src/app/examples/grid-composite-editor.component.ts

@@ -1072,4 +1072,11 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
           <span class="autocomplete-bottom-right">Type: <b>${item.itemTypeName === 'I' ? 'Item' : item.itemTypeName === 'C' ? 'PdCat' : 'Cat'}</b></span>
         </div>`;
   }
+
+  toggleSubTitle() {
+    this.hideSubTitle = !this.hideSubTitle;
+    const action = this.hideSubTitle ? 'add' : 'remove';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+    this.angularGrid.resizerService.resizeGrid(2);
+  }
 }

src/app/examples/grid-contextmenu.component.html

@@ -14,15 +14,15 @@ <h2>
       class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
       type="button"
       data-test="toggle-subtitle"
-      (click)="hideSubTitle = !hideSubTitle"
+      (click)="toggleSubTitle()"
     >
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
     <button class="btn btn-outline-secondary btn-sm" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
       <span>Toggle Dark Mode</span>
     </button>
   </h2>
-  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
 
   <div class="row mb-1">
     <div class="col-12">

src/app/examples/grid-contextmenu.component.ts

@@ -670,4 +670,11 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
     }
     this.angularGrid.slickGrid?.setOptions({ darkMode: this._darkModeGrid });
   }
+
+  toggleSubTitle() {
+    this.hideSubTitle = !this.hideSubTitle;
+    const action = this.hideSubTitle ? 'add' : 'remove';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+    this.angularGrid.resizerService.resizeGrid(2);
+  }
 }