chore: add subtitle toggle to all examples

docs/grid-functionalities/row-detail.md

@@ -408,7 +408,6 @@ export class MainGridComponent implements OnInit {
   gridOptions!: GridOption;
   angularGrid!: AngularGridInstance;
   dataset: Distributor[] = [];
-  showSubTitle = true;
 
   get rowDetailInstance(): SlickRowDetailView {
     return this.angularGrid.extensions.rowDetailView?.instance || {};

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

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

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

@@ -44,6 +44,7 @@ export class GridAddItemComponent implements OnInit {
   dataView!: SlickDataView;
   columnDefinitions: Column[] = [];
   gridOptions!: GridOption;
+  hideSubTitle = false;
   dataset: any[];
   updatedObject: any;
 

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

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

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

@@ -59,6 +59,7 @@ export class GridAngularComponent implements OnInit {
   dataset!: any[];
   gridObj: any;
   isAutoEdit = true;
+  hideSubTitle = false;
   alertWarning: any;
   updatedObject: any;
   selectedLanguage = 'en';

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

@@ -10,8 +10,16 @@ <h2>
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
+    <button
+      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+      type="button"
+      data-test="toggle-subtitle"
+      (click)="hideSubTitle = !hideSubTitle"
+    >
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
   </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
 
   <div class="row row-cols-lg-auto g-1 align-items-center">
     <div class="col">

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

@@ -36,6 +36,7 @@ export class GridAutoHeightComponent implements OnInit {
   selectedOperator = '=';
   searchValue = '';
   selectedColumn?: Column;
+  hideSubTitle = false;
 
   ngOnInit() {
     this.prepareGrid();

src/app/examples/grid-base-row-editing.component.html

@@ -9,9 +9,17 @@ <h2>
       <span class="mdi mdi-link-variant"></span> code
     </a>
   </span>
+  <button
+    class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+    type="button"
+    data-test="toggle-subtitle"
+    (click)="hideSubTitle = !hideSubTitle"
+  >
+    <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+  </button>
 </h2>
 
-<div class="subtitle">
+<div class="subtitle" [hidden]="hideSubTitle">
   <ul>
     <li>
       The Row Based Edit plugin allows you to edit either a single or multiple specific rows at a time, while disabling the rest

src/app/examples/grid-base-row-editing.component.ts

@@ -23,6 +23,7 @@ export class GridBaseRowEditingComponent implements OnInit {
   fetchResult = '';
   statusClass = 'alert alert-light';
   statusStyle = 'display: none';
+  hideSubTitle = false;
 
   constructor(private translate: TranslateService) {
     // always start with English for Cypress E2E tests to be consistent

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

@@ -10,8 +10,16 @@ <h2>
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
+    <button
+      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+      type="button"
+      data-test="toggle-subtitle"
+      (click)="hideSubTitle = !hideSubTitle"
+    >
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
   </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
 
   <h3>
     <div class="column">

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

@@ -24,6 +24,7 @@ export class GridBasicComponent implements OnDestroy, OnInit {
   gridOptions2!: GridOption;
   dataset1!: any[];
   dataset2!: any[];
+  hideSubTitle = false;
 
   ngOnInit(): void {
     this.prepareGrid();

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

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

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

@@ -56,6 +56,7 @@ export class GridClientSideComponent implements OnInit {
   gridOptions!: GridOption;
   dataset!: any[];
   metrics!: Metrics;
+  hideSubTitle = false;
 
   constructor(
     private http: HttpClient,

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

@@ -10,8 +10,16 @@ <h2>
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
+    <button
+      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+      type="button"
+      data-test="toggle-subtitle"
+      (click)="hideSubTitle = !hideSubTitle"
+    >
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
   </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
 
   <h3>Grid 1 <small>(with Header Grouping &amp; Colspan)</small></h3>
   <angular-slickgrid gridId="grid1" [columnDefinitions]="columnDefinitions1" [gridOptions]="gridOptions1" [dataset]="dataset1">

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

@@ -28,6 +28,7 @@ export class GridColspanComponent implements OnInit {
   gridOptions2!: GridOption;
   dataset1: any[] = [];
   dataset2: any[] = [];
+  hideSubTitle = false;
 
   ngOnInit(): void {
     this.prepareGrid1();

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

@@ -1,10 +1,7 @@
 <div id="demo-container" class="container-fluid">
   <h2>
     {{ title }}
-    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
-      <span class="mdi mdi-theme-light-dark"></span>
-      <span>Toggle Dark Mode</span>
-    </button>
+
     <span class="float-end">
       <a
         style="font-size: 18px"
@@ -14,8 +11,20 @@ <h2>
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
+    <button
+      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+      type="button"
+      data-test="toggle-subtitle"
+      (click)="hideSubTitle = !hideSubTitle"
+    >
+      <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 class="mdi mdi-theme-light-dark"></span>
+      <span>Toggle Dark Mode</span>
+    </button>
   </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [hidden]="hideSubTitle" [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

@@ -104,6 +104,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
   isCompositeDisabled = false;
   isMassSelectionDisabled = true;
   cellCssStyleQueue: string[] = [];
+  hideSubTitle = false;
   complexityLevelList = [
     { value: 0, label: 'Very Simple' },
     { value: 1, label: 'Simple' },

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

@@ -1,9 +1,6 @@
 <div class="container-fluid">
   <h2>
     {{ title }}
-    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
-      <span>Toggle Dark Mode</span>
-    </button>
     <span class="float-end">
       <a
         style="font-size: 18px"
@@ -13,8 +10,19 @@ <h2>
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
+    <button
+      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+      type="button"
+      data-test="toggle-subtitle"
+      (click)="hideSubTitle = !hideSubTitle"
+    >
+      <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" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
 
   <div class="row mb-1">
     <div class="col-12">

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

@@ -97,6 +97,7 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
   columnDefinitions!: Column[];
   gridOptions!: GridOption;
   dataset!: any[];
+  hideSubTitle = false;
   selectedLanguage: string;
 
   constructor(private translate: TranslateService) {

src/app/examples/grid-custom-pager.component.ts

@@ -21,6 +21,7 @@ export class CustomPagerComponent implements BasePaginationComponent {
   protected _paginationService!: PaginationService;
   protected _pubSubService!: PubSubService;
   currentPagination = {} as PaginationMetadata;
+  hideSubTitle = false;
 
   constructor(protected readonly elm: ElementRef) {}
 

src/app/examples/grid-custom-pagination.component.html

@@ -10,8 +10,16 @@ <h2>
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
+    <button
+      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+      type="button"
+      data-test="toggle-subtitle"
+      (click)="hideSubTitle = !hideSubTitle"
+    >
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
   </h2>
-  <div class="subtitle">
+  <div class="subtitle" [hidden]="hideSubTitle">
     You can create a Custom Pagination by passing an Angular Custom Component and it must
     <code>implements BasePaginationComponent</code>. Any of the pagination controls could be moved anywhere on the page (for
     example we purposely moved the page size away from the rest of the pagination elements).

src/app/examples/grid-custom-pagination.component.ts

@@ -31,6 +31,7 @@ export class GridCustomPaginationComponent implements OnInit {
   dataset: any[] = [];
   paginationPosition: 'bottom' | 'top' = 'top';
   angularGrid!: AngularGridInstance;
+  hideSubTitle = false;
 
   constructor(protected readonly angularUtilService: AngularUtilService) {}
 

src/app/examples/grid-custom-tooltip.component.html

@@ -10,8 +10,16 @@ <h2>
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
+    <button
+      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+      type="button"
+      data-test="toggle-subtitle"
+      (click)="hideSubTitle = !hideSubTitle"
+    >
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
   </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
 
   <div style="margin-bottom: 20px">
     <label for="pinned-rows">Simulated Server Delay (ms): </label>

src/app/examples/grid-custom-tooltip.component.ts

@@ -41,6 +41,7 @@ export class GridCustomTooltipComponent implements OnInit {
   gridOptions!: GridOption;
   dataset!: any[];
   serverApiDelay = 500;
+  hideSubTitle = false;
 
   ngOnInit(): void {
     this.initializeGrid();

src/app/examples/grid-drag-recycle.component.html

@@ -10,15 +10,23 @@ <h2>
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
+    <button
+      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+      type="button"
+      data-test="toggle-subtitle"
+      (click)="hideSubTitle = !hideSubTitle"
+    >
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
   </h2>
 
-  <h6 class="subtitle italic">
+  <div class="subtitle" [hidden]="hideSubTitle">
     <ul>
       <li>Click to select, Ctrl-click to toggle selection(s).</li>
       <li>Drag one or more rows by the handle icon (1st column) to reorder.</li>
       <li>Drag one or more rows by selection (2nd or 3rd column) and drag to the recycle bin to delete.</li>
     </ul>
-  </h6>
+  </div>
 
   <div class="row">
     <div class="col">

src/app/examples/grid-drag-recycle.component.ts

@@ -21,6 +21,7 @@ export class GridDragRecycleComponent implements OnInit {
   dragHelper?: HTMLElement;
   dragRows: number[] = [];
   dragMode = '';
+  hideSubTitle = false;
 
   ngOnInit(): void {
     this.defineGrids();

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

@@ -1,10 +1,7 @@
 <div id="demo-container" class="container-fluid">
   <h2>
     {{ title }}
-    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
-      <span class="mdi mdi-theme-light-dark"></span>
-      <span>Toggle Dark Mode</span>
-    </button>
+
     <span class="float-end">
       <a
         style="font-size: 18px"
@@ -14,8 +11,20 @@ <h2>
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
+    <button
+      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+      type="button"
+      data-test="toggle-subtitle"
+      (click)="hideSubTitle = !hideSubTitle"
+    >
+      <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 class="mdi mdi-theme-light-dark"></span>
+      <span>Toggle Dark Mode</span>
+    </button>
   </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
 
   <form class="form-inline">
     <div class="row">