Merge pull request #1543 from ghiscoding/bugfix/remap-all-rowspan

chore: add rowspan demo with show/hide column with full remapping

Author: ghiscoding

src/app/examples/grid43.component.html

@@ -70,6 +70,13 @@ <h2>
     <span class="mdi mdi-chevron-down mdi-rotate-270"></span>
     Navigate to Right Cell
   </button>
+  <button
+    class="ms-2 btn btn-outline-secondary btn-sm btn-icon mx-1"
+    data-test="toggle-employee-id"
+    (click)="toggleEmployeeIdVisibility()"
+  >
+    Show/Hide EmployeeID
+  </button>
   <button class="ms-1 btn btn-outline-secondary btn-sm btn-icon mx-1" (click)="toggleEditing()" data-test="toggle-editing">
     <span class="mdi mdi-pencil-outline"></span>
     <span

src/app/examples/grid43.component.ts

@@ -14,6 +14,7 @@ export class Grid43Component implements OnInit {
   gridOptions!: GridOption;
   dataset: any[] = [];
   isEditable = false;
+  showEmployeeId = true;
   showSubTitle = true;
   metadata: ItemMetadata | Record<number, ItemMetadata> = {
     // 10001: Davolio
@@ -152,6 +153,7 @@ export class Grid43Component implements OnInit {
       enableCellNavigation: true,
       enableColumnReorder: true,
       enableCellRowSpan: true,
+      enableHeaderMenu: false,
       enableExcelExport: true,
       externalResources: [this.excelExportService],
       enableExcelCopyBuffer: true,
@@ -412,6 +414,38 @@ export class Grid43Component implements OnInit {
     ];
   }
 
+  // when a side effect happens (e.g. show/hide EmployeeID),
+  // you have to recalculate the metadata by yourself
+  // if column index(es) aren't changing then "invalidateRows()" or "invalidate()" might be sufficient
+  // however, when column index(es) changed then you will have to call "remapAllColumnsRowSpan()" to clear & reevaluate the rowspan cache
+  toggleEmployeeIdVisibility() {
+    const newMetadata: any = {};
+    this.showEmployeeId = !this.showEmployeeId;
+
+    // direction to calculate new column indexes (-1 or +1 on the column index)
+    // e.g. metadata = `{0:{columns:{1:{rowspan: 2}}}}` if we hide then new result is `{0:{columns:{0:{rowspan: 2}}}}`
+    const dir = this.showEmployeeId ? 1 : -1;
+    for (const row of Object.keys(this.metadata)) {
+      newMetadata[row] = { columns: {} };
+      for (const col of Object.keys((this.metadata as any)[row].columns)) {
+        newMetadata[row].columns[Number(col) + dir] = (this.metadata as any)[row].columns[col];
+      }
+    }
+
+    // update column definitions
+    if (this.showEmployeeId) {
+      this.columnDefinitions.unshift({ id: 'employeeID', name: 'Employee ID', field: 'employeeID', width: 100 });
+    } else {
+      this.columnDefinitions.splice(0, 1);
+    }
+    this.angularGrid.slickGrid.setColumns(this.columnDefinitions);
+
+    // update & remap rowspans
+    this.metadata = newMetadata;
+    this.angularGrid.slickGrid.remapAllColumnsRowSpan();
+    this.angularGrid.slickGrid.invalidate();
+  }
+
   toggleSubTitle() {
     this.showSubTitle = !this.showSubTitle;
     const action = this.showSubTitle ? 'remove' : 'add';

src/app/examples/grid44.component.ts

@@ -274,6 +274,7 @@ export class Grid44Component implements OnInit {
       enableCellNavigation: true,
       enableColumnReorder: true,
       enableCellRowSpan: true,
+      enableHeaderMenu: false,
       gridHeight: 600,
       gridWidth: 900,
       rowHeight: 30,

test/cypress/e2e/example43.cy.ts

@@ -403,4 +403,80 @@ describe('Example 43 - colspan/rowspan - Employees Timesheets', { retries: 0 },
       cy.get('[data-row=6] > .slick-cell.l4.r4.active.editable .editor-text').should('not.exist');
     });
   });
+
+  describe('Rowspan Remapping', () => {
+    describe('hide EmployeeID', () => {
+      it('should hide EmployeeID', () => {
+        cy.get('[data-test="toggle-employee-id"]').click();
+      });
+
+      it('should expect EmployeeID to follow columns at index 0 column index', () => {
+        cy.get(`[data-row=0] > .slick-cell.l0.r0.rowspan`).should('contain', 'Davolio');
+        cy.get(`[data-row=0] > .slick-cell.l0.r0.rowspan`).should(($el) =>
+          expect(parseInt(`${$el.outerHeight()}`, 10)).to.eq(GRID_ROW_HEIGHT * 2)
+        );
+
+        cy.get(`[data-row=2] > .slick-cell.l1.r3.rowspan`).should('contain', 'Check Mail');
+        cy.get(`[data-row=2] > .slick-cell.l1.r3.rowspan`).should(($el) =>
+          expect(parseInt(`${$el.outerHeight()}`, 10)).to.eq(GRID_ROW_HEIGHT * 2)
+        );
+
+        cy.get(`[data-row=8] > .slick-cell.l6.r8.rowspan`).should('contain', 'Development');
+        cy.get(`[data-row=8] > .slick-cell.l6.r8.rowspan`).should(($el) =>
+          expect(parseInt(`${$el.outerHeight()}`, 10)).to.eq(GRID_ROW_HEIGHT * 2)
+        );
+      });
+
+      it('should expect "Lunch Break" to be moved to the left by 1 index less', () => {
+        cy.get(`[data-row=0] > .slick-cell.l9.r11.rowspan`).should('contain', 'Lunch Break');
+        cy.get(`[data-row=0] > .slick-cell.l9.r11.rowspan`).should(($el) =>
+          expect(parseInt(`${$el.outerHeight()}`, 10)).to.eq(GRID_ROW_HEIGHT * 10)
+        );
+      });
+
+      it('should expect "Development" to be moved to the left by 1 index less', () => {
+        cy.get(`[data-row=1] > .slick-cell.l12.r13.rowspan`).should('contain', 'Development');
+        cy.get(`[data-row=1] > .slick-cell.l12.r13.rowspan`).should(($el) =>
+          expect(parseInt(`${$el.outerHeight()}`, 10)).to.eq(GRID_ROW_HEIGHT * 5)
+        );
+      });
+    });
+
+    describe('show EmployeeID', () => {
+      it('should show EmployeeID', () => {
+        cy.get('[data-test="toggle-employee-id"]').click();
+      });
+
+      it('should expect EmployeeID to follow columns at index 1 column index', () => {
+        cy.get(`[data-row=0] > .slick-cell.l1.r1.rowspan`).should('contain', 'Davolio');
+        cy.get(`[data-row=0] > .slick-cell.l1.r1.rowspan`).should(($el) =>
+          expect(parseInt(`${$el.outerHeight()}`, 10)).to.eq(GRID_ROW_HEIGHT * 2)
+        );
+
+        cy.get(`[data-row=2] > .slick-cell.l2.r4.rowspan`).should('contain', 'Check Mail');
+        cy.get(`[data-row=2] > .slick-cell.l2.r4.rowspan`).should(($el) =>
+          expect(parseInt(`${$el.outerHeight()}`, 10)).to.eq(GRID_ROW_HEIGHT * 2)
+        );
+
+        cy.get(`[data-row=8] > .slick-cell.l7.r9.rowspan`).should('contain', 'Development');
+        cy.get(`[data-row=8] > .slick-cell.l7.r9.rowspan`).should(($el) =>
+          expect(parseInt(`${$el.outerHeight()}`, 10)).to.eq(GRID_ROW_HEIGHT * 2)
+        );
+      });
+
+      it('should expect "Lunch Break" to be moved to the right by 1 index less', () => {
+        cy.get(`[data-row=0] > .slick-cell.l10.r12.rowspan`).should('contain', 'Lunch Break');
+        cy.get(`[data-row=0] > .slick-cell.l10.r12.rowspan`).should(($el) =>
+          expect(parseInt(`${$el.outerHeight()}`, 10)).to.eq(GRID_ROW_HEIGHT * 10)
+        );
+      });
+
+      it('should expect "Development" to be moved to the right by 1 index less and a large "Development" section that spans over multiple columns & rows in the afternoon', () => {
+        cy.get(`[data-row=1] > .slick-cell.l13.r14.rowspan`).should('contain', 'Development');
+        cy.get(`[data-row=1] > .slick-cell.l13.r14.rowspan`).should(($el) =>
+          expect(parseInt(`${$el.outerHeight()}`, 10)).to.eq(GRID_ROW_HEIGHT * 5)
+        );
+      });
+    });
+  });
 });