Merge pull request #1544 from ghiscoding/chore/subtitle-toggle

chore: add subtitle toggle to all examples

Author: ghiscoding

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">