Merge pull request #1535 from ghiscoding/feat/row-detail-inner-grid

fix: Row Detail with inner grids

Author: ghiscoding

docs/grid-functionalities/row-detail.md

@@ -384,4 +384,148 @@ addNewColumn() {
   // you could also use SlickGrid setColumns() method
   // this.angularGrid.slickGrid.setColumns(cols);
 }
+```
+
+## Row Detail with Inner Grid
+
+You can also add an inner grid inside a Row Detail, however there are a few things to know off and remember. Any time a Row Detail is falling outside the main grid viewport, it will be unmounted and until it comes back into the viewport which is then remounted. The process of unmounting and remounting means that Row Detail previous states aren't preserved, however you could use Grid State & Presets to overcome this problem.
+
+##### Component
+
+Main Grid Component
+
+```ts
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { AngularGridInstance, Column, GridOption, GridState } from 'angular-slickgrid';
+
+@Component({
+  styleUrls: ['main-grid.component.scss'],
+  templateUrl: './main-grid.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class MainGridComponent implements OnInit {
+  columnDefinitions: Column[] = [];
+  gridOptions!: GridOption;
+  angularGrid!: AngularGridInstance;
+  dataset: Distributor[] = [];
+  showSubTitle = true;
+
+  get rowDetailInstance(): SlickRowDetailView {
+    return this.angularGrid.extensions.rowDetailView?.instance || {};
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  ngOnInit(): void {
+    this.defineGrid();
+    this.dataset = this.getData();
+  }
+
+  defineGrid() {
+    this.columnDefinitions = [ /*...*/ ];
+    this.gridOptions = {
+      enableRowDetailView: true,
+      rowSelectionOptions: {
+        selectActiveRow: true
+      },
+      preRegisterExternalExtensions: (pubSubService) => {
+        // Row Detail View is a special case because of its requirement to create extra column definition dynamically
+        // so it must be pre-registered before SlickGrid is instantiated, we can do so via this option
+        const rowDetail = new SlickRowDetailView(pubSubService as EventPubSubService);
+        return [{ name: ExtensionName.rowDetailView, instance: rowDetail }];
+      },
+      rowDetailView: {
+        process: (item: any) => simulateServerAsyncCall(item),
+        loadOnce: false, // IMPORTANT, you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events
+        panelRows: 10,
+        preloadComponent: PreloadComponent,
+        viewComponent:  InnerGridComponent,
+      },
+    };
+  }
+}
+```
+
+Now, let's define our Inner Grid Component
+
+```html
+<div [class]="innerGridClass">
+  <h4>Order Details (id: {{ model.id }})</h4>
+  <div class="container-fluid">
+    <angular-slickgrid
+      [gridId]="innerGridId"
+      [columnDefinitions]="innerColDefs"
+      [gridOptions]="innerGridOptions"
+      [dataset]="innerDataset"
+      (onAngularGridCreated)="angularGridReady($event.detail)"
+    >
+    </angular-slickgrid>
+  </div>
+</div>
+```
+
+```ts
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { AngularGridInstance, Column, GridOption, GridState } from 'angular-slickgrid';
+
+export interface Distributor { /* ... */ }
+export interface OrderData { /* ... */ }
+
+@Component({
+  templateUrl: './inner-grid.component.html',
+})
+export class InnerGridComponent implements OnInit {
+  model!: Distributor;
+  innerColDefs: Column[] = [];
+  innerGridOptions!: GridOption;
+  angularGrid!: AngularGridInstance;
+  innerDataset: any[] = [];
+  innerGridId = '';
+  innerGridClass = '';
+
+  ngOnInit(): void {
+    this.innerGridId = `innergrid-${this.model.id}`;
+    this.innerGridClass = `row-detail-${this.model.id}`;
+    this.defineGrid();
+    this.innerDataset = [...this.model.orderData];
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  defineGrid() {
+    // OPTIONALLY reapply Grid State as Presets before unmounting the compoment
+    let gridState: GridState | undefined;
+    const gridStateStr = sessionStorage.getItem(`gridstate_${this.innerGridClass}`);
+    if (gridStateStr) {
+      gridState = JSON.parse(gridStateStr);
+    }
+
+    this.innerColDefs = [
+      { id: 'orderId', field: 'orderId', name: 'Order ID', filterable: true, sortable: true },
+      { id: 'shipCity', field: 'shipCity', name: 'Ship City', filterable: true, sortable: true },
+      { id: 'freight', field: 'freight', name: 'Freight', filterable: true, sortable: true, type: 'number' },
+      { id: 'shipName', field: 'shipName', name: 'Ship Name', filterable: true, sortable: true },
+    ];
+
+    this.innerGridOptions = {
+      autoResize: {
+        container: `.${this.innerGridClass}`,
+      },
+      enableFiltering: true,
+      enableSorting: true,
+      datasetIdPropertyName: 'orderId',
+      presets: gridState, // reapply grid state presets
+    };
+  }
+
+  // OPTIONALLY save Grid State before unmounting the compoment
+  handleBeforeGridDestroy() {
+    const gridState = this.angularGrid.gridStateService.getCurrentGridState();
+    sessionStorage.setItem(`gridstate_${this.innerGridClass}`, JSON.stringify(gridState));
+  }
+}
 ```

package.json

@@ -53,13 +53,13 @@
   },
   "dependencies": {
     "@ngx-translate/core": "^15.0.0",
-    "@slickgrid-universal/common": "~5.12.2",
-    "@slickgrid-universal/custom-footer-component": "~5.12.2",
-    "@slickgrid-universal/empty-warning-component": "~5.12.2",
-    "@slickgrid-universal/event-pub-sub": "~5.12.2",
-    "@slickgrid-universal/pagination-component": "~5.12.2",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.12.2",
-    "@slickgrid-universal/rxjs-observable": "~5.12.2",
+    "@slickgrid-universal/common": "~5.13.0",
+    "@slickgrid-universal/custom-footer-component": "~5.13.0",
+    "@slickgrid-universal/empty-warning-component": "~5.13.0",
+    "@slickgrid-universal/event-pub-sub": "~5.13.0",
+    "@slickgrid-universal/pagination-component": "~5.13.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.13.0",
+    "@slickgrid-universal/rxjs-observable": "~5.13.0",
     "dequal": "^2.0.3",
     "rxjs": "^7.8.1"
   },
@@ -92,12 +92,12 @@
     "@ngx-translate/http-loader": "^8.0.0",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^10.0.0",
-    "@slickgrid-universal/composite-editor-component": "~5.12.2",
-    "@slickgrid-universal/custom-tooltip-plugin": "~5.12.2",
-    "@slickgrid-universal/excel-export": "~5.12.2",
-    "@slickgrid-universal/graphql": "~5.12.2",
-    "@slickgrid-universal/odata": "~5.12.2",
-    "@slickgrid-universal/text-export": "~5.12.2",
+    "@slickgrid-universal/composite-editor-component": "~5.13.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "~5.13.0",
+    "@slickgrid-universal/excel-export": "~5.13.0",
+    "@slickgrid-universal/graphql": "~5.13.0",
+    "@slickgrid-universal/odata": "~5.13.0",
+    "@slickgrid-universal/text-export": "~5.13.0",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.13.1",

src/app/app-routing.module.ts

@@ -42,6 +42,7 @@ import { GridTreeDataParentChildComponent } from './examples/grid-tree-data-pare
 import { Grid18Component } from './examples/grid18.component';
 import { Grid43Component } from './examples/grid43.component';
 import { Grid44Component } from './examples/grid44.component';
+import { Grid45Component } from './examples/grid45.component';
 import { SwtCommonGridTestComponent } from './examples/swt-common-grid-test.component';
 
 import { NgModule } from '@angular/core';
@@ -86,6 +87,7 @@ const routes: Routes = [
   { path: 'range', component: GridRangeComponent },
   { path: 'resize-by-content', component: GridResizeByContentComponent },
   { path: 'rowdetail', component: GridRowDetailComponent },
+  { path: 'rowdetail-innergrid', component: Grid45Component },
   { path: 'rowmove', component: GridRowMoveComponent },
   { path: 'rowspan-timesheets', component: Grid43Component },
   { path: 'rowspan-large', component: Grid44Component },

src/app/app.component.html

@@ -182,6 +182,9 @@
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/rowspan-large']">44- Colspan/Rowspan (large data)</a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/rowdetail-innergrid']">45- Row Detail with inner Grid</a>
+        </li>
       </ul>
     </section>
 

src/app/app.module.ts

@@ -58,10 +58,12 @@ import { GridTreeDataParentChildComponent } from './examples/grid-tree-data-pare
 import { Grid18Component } from './examples/grid18.component';
 import { Grid43Component } from './examples/grid43.component';
 import { Grid44Component } from './examples/grid44.component';
+import { Grid45Component } from './examples/grid45.component';
 import { HomeComponent } from './examples/home.component';
 import { CustomPagerComponent } from './examples/grid-custom-pager.component';
 import { RowDetailPreloadComponent } from './examples/rowdetail-preload.component';
 import { RowDetailViewComponent } from './examples/rowdetail-view.component';
+import { Grid45DetailComponent } from './examples/grid45-detail.component';
 
 import { SwtCommonGridTestComponent } from './examples/swt-common-grid-test.component';
 import { SwtCommonGridPaginationComponent } from './examples/swt-common-grid-pagination.component';
@@ -149,6 +151,8 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     Grid18Component,
     Grid43Component,
     Grid44Component,
+    Grid45Component,
+    Grid45DetailComponent,
     RowDetailPreloadComponent,
     RowDetailViewComponent,
     SwtCommonGridTestComponent,

src/app/examples/grid45-detail.component.html

@@ -0,0 +1,14 @@
+<div [class]="innerGridClass">
+  <h4>{{ model.companyName }} - Order Details (id: {{ model.id }})</h4>
+  <div class="container-fluid">
+    <angular-slickgrid
+      [gridId]="innerGridId"
+      [columnDefinitions]="innerColDefs"
+      [gridOptions]="innerGridOptions"
+      [dataset]="innerDataset"
+      (onAngularGridCreated)="angularGridReady($event.detail)"
+      (onBeforeGridDestroy)="handleBeforeGridDestroy()"
+    >
+    </angular-slickgrid>
+  </div>
+</div>

src/app/examples/grid45-detail.component.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { AngularGridInstance, Column, GridOption, GridState } from '../modules/angular-slickgrid';
+
+export interface Distributor {
+  id: number;
+  companyId: number;
+  companyName: string;
+  city: string;
+  streetAddress: string;
+  zipCode: string;
+  country: string;
+  orderData: OrderData[];
+  isUsingInnerGridStatePresets: boolean;
+}
+
+export interface OrderData {
+  orderId: string;
+  shipCity: string;
+  freight: number;
+  shipName: string;
+}
+
+@Component({
+  styles: ['.detail-label { display: inline-flex; align-items: center; gap: 4px; padding: 4px; }', 'label { font-weight: 600; }'],
+  templateUrl: './grid45-detail.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class Grid45DetailComponent implements OnInit {
+  model!: Distributor;
+  innerColDefs: Column[] = [];
+  innerGridOptions!: GridOption;
+  angularGrid!: AngularGridInstance;
+  innerDataset: any[] = [];
+  innerGridId = '';
+  innerGridClass = '';
+  showGrid = false;
+
+  ngOnInit(): void {
+    this.innerGridId = `innergrid-${this.model.id}`;
+    this.innerGridClass = `row-detail-${this.model.id}`;
+    // define the grid options & columns and then create the grid itself
+    this.defineGrid();
+
+    // mock some data (different in each dataset)
+    this.innerDataset = [...this.model.orderData];
+    this.showGrid = true;
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  defineGrid() {
+    // when Grid State found in Session Storage, reapply inner Grid State then reapply it as preset
+    let gridState: GridState | undefined;
+    if (this.model.isUsingInnerGridStatePresets) {
+      const gridStateStr = sessionStorage.getItem(`gridstate_${this.innerGridClass}`);
+      if (gridStateStr) {
+        gridState = JSON.parse(gridStateStr);
+      }
+    }
+
+    this.innerColDefs = [
+      { id: 'orderId', field: 'orderId', name: 'Order ID', filterable: true, sortable: true },
+      { id: 'shipCity', field: 'shipCity', name: 'Ship City', filterable: true, sortable: true },
+      { id: 'freight', field: 'freight', name: 'Freight', filterable: true, sortable: true, type: 'number' },
+      { id: 'shipName', field: 'shipName', name: 'Ship Name', filterable: true, sortable: true },
+    ];
+
+    this.innerGridOptions = {
+      autoResize: {
+        container: `.${this.innerGridClass}`,
+        rightPadding: 30,
+        minHeight: 200,
+      },
+      enableFiltering: true,
+      enableSorting: true,
+      rowHeight: 33,
+      enableCellNavigation: true,
+      datasetIdPropertyName: 'orderId',
+      presets: gridState,
+    };
+  }
+
+  handleBeforeGridDestroy() {
+    if (this.model.isUsingInnerGridStatePresets) {
+      const gridState = this.angularGrid.gridStateService.getCurrentGridState();
+      sessionStorage.setItem(`gridstate_${this.innerGridClass}`, JSON.stringify(gridState));
+    }
+  }
+}