fix(plugin): Row Detail column sorting was offset, fixes #949

- fixes #949
- Row Detail extension columns were offset by 1 column (ie, clicking on 2nd column would sort 1st column), internally the RowDetail extension has to be instantiated a little bit more early within Angular-Slickgrid for it to properly sync columns and so on
- added couple more Cypress E2E tests to cover the Sorting icons to be displayed under the expected column

Author: ghiscoding

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

@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import {
   AngularGridInstance,
   Column,
-  ExtensionList,
   FieldType,
   Filters,
   Formatters,
@@ -12,7 +11,7 @@ import {
 import { RowDetailViewComponent } from './rowdetail-view.component';
 import { RowDetailPreloadComponent } from './rowdetail-preload.component';
 
-const NB_ITEMS = 500;
+const NB_ITEMS = 1000;
 
 @Component({
   templateUrl: './grid-rowdetail.component.html'
@@ -29,12 +28,12 @@ export class GridRowDetailComponent implements OnInit {
   `;
 
   angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
+  columnDefinitions: Column[] = [];
   gridOptions!: GridOption;
-  dataset!: any[];
+  dataset: any[] = [];
   detailViewRowCount = 9;
-  message = '';
   flashAlertType = 'info';
+  message = '';
 
   constructor() { }
 
@@ -58,12 +57,6 @@ export class GridRowDetailComponent implements OnInit {
 
   /* Define grid Options and Columns */
   defineGrid() {
-    // prepare a multiple-select array to filter with
-    const multiSelectFilterArray = [];
-    for (let i = 0; i < NB_ITEMS; i++) {
-      multiSelectFilterArray.push({ value: i, label: i });
-    }
-
     this.columnDefinitions = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70, filterable: true },
       { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimal: 1, maxDecimal: 2 }, sortable: true, type: FieldType.number, minWidth: 90, filterable: true },
@@ -138,7 +131,7 @@ export class GridRowDetailComponent implements OnInit {
   getData() {
     // mock a dataset
     this.dataset = [];
-    for (let i = 0; i < 1000; i++) {
+    for (let i = 0; i < NB_ITEMS; i++) {
       const randomYear = 2000 + Math.floor(Math.random() * 10);
       const randomMonth = Math.floor(Math.random() * 11);
       const randomDay = Math.floor((Math.random() * 29));
@@ -202,4 +195,4 @@ export class GridRowDetailComponent implements OnInit {
   private randomNumber(min: number, max: number) {
     return Math.floor(Math.random() * (max - min + 1) + min);
   }
-}
+}

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -900,7 +900,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy {
           // filtering data with local dataset will not always show correctly unless we call this updateRow/render
           // also don't use "invalidateRows" since it destroys the entire row and as bad user experience when updating a row
           // see commit: https://github.com/ghiscoding/aurelia-slickgrid/commit/8c503a4d45fba11cbd8d8cc467fae8d177cc4f60
-          if (gridOptions && gridOptions.enableFiltering && !gridOptions.enableRowDetailView) {
+          if (gridOptions?.enableFiltering && !gridOptions.enableRowDetailView) {
             if (args?.rows && Array.isArray(args.rows)) {
               args.rows.forEach((row: number) => grid.updateRow(row));
               grid.render();
@@ -1215,12 +1215,19 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy {
     return options;
   }
 
-  /** Pre-Register any Resource that don't require SlickGrid to be instantiated (for example RxJS Resource) */
+  /** Pre-Register any Resource that don't require SlickGrid to be instantiated (for example RxJS Resource & RowDetail) */
   private preRegisterResources() {
     this._registeredResources = this.gridOptions.registerExternalResources || [];
 
     // Angular-Slickgrid requires RxJS, so we'll register it as the first resource
     this.registerRxJsResource(new RxJsResource() as RxJsFacade);
+
+    if (this.gridOptions.enableRowDetailView) {
+      this.slickRowDetailView = new SlickRowDetailView(this.angularUtilService, this.appRef, this._eventPubSubService, this.elm.nativeElement, this.rxjs);
+      this.slickRowDetailView.create(this.columnDefinitions, this.gridOptions);
+      this._registeredResources.push(this.slickRowDetailView);
+      this.extensionService.addExtensionToList(ExtensionName.rowDetailView, { name: ExtensionName.rowDetailView, instance: this.slickRowDetailView });
+    }
   }
 
   private registerResources() {
@@ -1247,13 +1254,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy {
       this.extensionService.translateColumnHeaders();
     }
 
-    if (this.gridOptions.enableRowDetailView) {
-      this.slickRowDetailView = new SlickRowDetailView(this.angularUtilService, this.appRef, this._eventPubSubService, this.elm.nativeElement, this.rxjs);
-      this.slickRowDetailView.create(this.columnDefinitions, this.gridOptions);
-      this._registeredResources.push(this.slickRowDetailView);
-      this.extensionService.addExtensionToList(ExtensionName.rowDetailView, { name: ExtensionName.rowDetailView, instance: this.slickRowDetailView });
-    }
-
     // also initialize (render) the empty warning component
     this.slickEmptyWarning = new SlickEmptyWarningComponent();
     this._registeredResources.push(this.slickEmptyWarning);

src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts

@@ -1,6 +1,3 @@
-import 'slickgrid/plugins/slick.rowdetailview';
-import 'slickgrid/plugins/slick.rowselectionmodel';
-
 import { ApplicationRef, ComponentRef, Type, ViewContainerRef } from '@angular/core';
 import {
   addToArrayWhenNotExists,

test/cypress/e2e/example21.cy.js

@@ -166,7 +166,7 @@ describe('Example 21 - Row Detail View', { retries: 1 }, () => {
   });
 
   it('should open a few Row Details, then sort by Title and expect all Row Details to be closed afterward', () => {
-    const expectedTasks = ['Task 1', 'Task 10', 'Task 100', 'Task 101', 'Task 102'];
+    const expectedTasks = ['Task 1', 'Task 10', 'Task 100', 'Task 101', 'Task 102', 'Task 103', 'Task 104'];
 
     cy.get('#grid21')
       .find('.slick-row:nth(0)')
@@ -221,6 +221,11 @@ describe('Example 21 - Row Detail View', { retries: 1 }, () => {
       .should('contain', 'Sort Ascending')
       .click();
 
+    cy.get('#grid21')
+      .find('.slick-header-column:nth(1)')
+      .find('.slick-sort-indicator-asc')
+      .should('have.length', 1);
+
     cy.get('.slick-viewport-top.slick-viewport-left')
       .scrollTo('top');
 
@@ -295,6 +300,10 @@ describe('Example 21 - Row Detail View', { retries: 1 }, () => {
       .contains('Clear all Sorting')
       .click();
 
+    cy.get('#grid21')
+      .find('.slick-sort-indicator-asc')
+      .should('have.length', 0);
+
     cy.get('#grid21')
       .find('.innerDetailView_102 .container_102')
       .as('detailContainer');