refactor(example): add Row Detail dynamic method call demo

Author: Ghislain Beaulac

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

@@ -1,22 +1,25 @@
 <div class="container-fluid">
-    <h2>{{title}}</h2>
-    <div class="subtitle" [innerHTML]="subTitle"></div>
+  <h2>{{title}}</h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
 
-    <span>
-        <label for="">Detail View Rows Shown: </label>
-        <input type="number" [(ngModel)]="detailViewRowCount">
-        <button class="btn btn-outline-secondary btn-xs" (click)="changeDetailViewRowCount()">
-            Set
-        </button>
-    </span>
+  <span>
+    <button class="btn btn-default btn-sm" (click)="closeAllRowDetail()">
+      Close All Row Details
+    </button>
+    &nbsp;&nbsp;
+    <label for="">Detail View Rows Shown: </label>
+    <input type="number" [(ngModel)]="detailViewRowCount">
+    <button class="btn btn-default btn-xs" (click)="changeDetailViewRowCount()">
+      Set
+    </button>
+  </span>
 
-    <hr/>
+  <hr />
 
-    <angular-slickgrid gridId="grid21"
-              [columnDefinitions]="columnDefinitions"
-              [gridOptions]="gridOptions"
-              [dataset]="dataset"
-              (onAngularGridCreated)="angularGridReady($event)">
-    </angular-slickgrid>
+  <angular-slickgrid gridId="grid21"
+                     [columnDefinitions]="columnDefinitions"
+                     [gridOptions]="gridOptions"
+                     [dataset]="dataset"
+                     (onAngularGridCreated)="angularGridReady($event)">
+  </angular-slickgrid>
 </div>
-

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

@@ -20,7 +20,7 @@ const NB_ITEMS = 500;
 export class GridRowDetailComponent implements OnInit {
   title = 'Example 21: Row Detail View';
   subTitle = `
-    Add functionality to show extra information with a Row Detail View
+    Add functionality to show extra information with a Row Detail View, (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Row-Detail" target="_blank">Wiki docs</a>)
     <ul>
       <li>Click on the row "+" icon or anywhere on the row to open it (the latter can be changed via property "useRowClick: false")</li>
       <li>Pass a View/Model as a Template to the Row Detail</li>
@@ -43,6 +43,10 @@ export class GridRowDetailComponent implements OnInit {
     this.angularGrid = angularGrid;
   }
 
+  get rowDetailInstance(): any {
+    return this.angularGrid && this.angularGrid.extensionService.getSlickgridAddonInstance(ExtensionName.rowDetailView) || {};
+  }
+
   ngOnInit(): void {
     this.defineGrid();
   }
@@ -86,7 +90,7 @@ export class GridRowDetailComponent implements OnInit {
       rowDetailView: {
         // We can load the "process" asynchronously in 2 different ways (httpClient OR even Promise)
         process: (item) => this.simulateServerAsyncCall(item),
-        // process: this.httpFetch.fetch(`api/item/${item.id}`),
+        // process: (item) => this.http.get(`api/item/${item.id}`),
 
         // load only once and reuse the same item detail without calling process method
         loadOnce: true,
@@ -108,10 +112,10 @@ export class GridRowDetailComponent implements OnInit {
         // for example, display the expand icon only on every 2nd row
         // expandableOverride: (row: number, dataContext: any, grid: any) => (dataContext.id % 2 === 1),
 
-        // Preload View Template
+        // Preload View Component
         preloadComponent: RowDetailPreloadComponent,
 
-        // ViewModel Template to load when row detail data is ready
+        // View Component to load when row detail data is ready
         viewComponent: RowDetailViewComponent,
       }
     };
@@ -144,10 +148,17 @@ export class GridRowDetailComponent implements OnInit {
 
   changeDetailViewRowCount() {
     if (this.angularGrid && this.angularGrid.extensionService) {
-      const rowDetailInstance = this.angularGrid.extensionService.getSlickgridAddonInstance(ExtensionName.rowDetailView);
-      const options = rowDetailInstance.getOptions();
-      options.panelRows = this.detailViewRowCount; // change number of rows dynamically
-      rowDetailInstance.setOptions(options);
+      const options = this.rowDetailInstance.getOptions();
+      if (options && options.panelRows) {
+        options.panelRows = this.detailViewRowCount; // change number of rows dynamically
+        this.rowDetailInstance.setOptions(options);
+      }
+    }
+  }
+
+  closeAllRowDetail() {
+    if (this.angularGrid && this.angularGrid.extensionService) {
+      this.rowDetailInstance.collapseAll();
     }
   }