From c9d3b1bddd26352092a69aa7a725aa77f63a348a Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Mon, 17 Mar 2025 23:04:46 -0400
Subject: [PATCH 1/3] chore: add rowspan demo with show/hide column with full
 remapping

---
 src/app/examples/grid43.component.html |  7 +++
 src/app/examples/grid43.component.ts   | 33 +++++++++++
 test/cypress/e2e/example43.cy.ts       | 76 ++++++++++++++++++++++++++
 3 files changed, 116 insertions(+)

diff --git a/src/app/examples/grid43.component.html b/src/app/examples/grid43.component.html
index 3544cd72c..43a8c29ee 100644
--- a/src/app/examples/grid43.component.html
+++ b/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
diff --git a/src/app/examples/grid43.component.ts b/src/app/examples/grid43.component.ts
index 0d148c1a6..2b3fe1613 100644
--- a/src/app/examples/grid43.component.ts
+++ b/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
@@ -412,6 +413,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 (let row of Object.keys(this.metadata)) {
+      newMetadata[row] = { columns: {} };
+      for (let 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';
diff --git a/test/cypress/e2e/example43.cy.ts b/test/cypress/e2e/example43.cy.ts
index 343e68bcf..5c03478c7 100644
--- a/test/cypress/e2e/example43.cy.ts
+++ b/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)
+        );
+      });
+    });
+  });
 });

From 0bfe38e71cfc89beb37fa03c2183f4d5a0c82592 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Mon, 17 Mar 2025 23:07:29 -0400
Subject: [PATCH 2/3] chore: fix eslint errors

---
 src/app/examples/grid43.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/examples/grid43.component.ts b/src/app/examples/grid43.component.ts
index 2b3fe1613..542fcb75c 100644
--- a/src/app/examples/grid43.component.ts
+++ b/src/app/examples/grid43.component.ts
@@ -424,9 +424,9 @@ export class Grid43Component implements OnInit {
     // 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 (let row of Object.keys(this.metadata)) {
+    for (const row of Object.keys(this.metadata)) {
       newMetadata[row] = { columns: {} };
-      for (let col of Object.keys((this.metadata as any)[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];
       }
     }

From 698b7366dd3111081306b8bff5ff218814e4d7a7 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Mon, 17 Mar 2025 23:34:35 -0400
Subject: [PATCH 3/3] chore: disable header menu

---
 src/app/examples/grid43.component.ts | 1 +
 src/app/examples/grid44.component.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/app/examples/grid43.component.ts b/src/app/examples/grid43.component.ts
index 542fcb75c..26462377a 100644
--- a/src/app/examples/grid43.component.ts
+++ b/src/app/examples/grid43.component.ts
@@ -153,6 +153,7 @@ export class Grid43Component implements OnInit {
       enableCellNavigation: true,
       enableColumnReorder: true,
       enableCellRowSpan: true,
+      enableHeaderMenu: false,
       enableExcelExport: true,
       externalResources: [this.excelExportService],
       enableExcelCopyBuffer: true,
diff --git a/src/app/examples/grid44.component.ts b/src/app/examples/grid44.component.ts
index d9a9ffb84..acb2e1778 100644
--- a/src/app/examples/grid44.component.ts
+++ b/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,