fix: regression introduced by PR #640 and commit f12f4cc

- this PR fixes 2 issues identified in Frozen Grids and in Slickgrid-Universal lib

cypress/integration/example-frozen-columns-and-column-group.spec.js

@@ -4,7 +4,7 @@ describe('Example - Row Grouping Titles', () => {
     const fullPreTitles = ['', 'Common Factor', 'Period', 'Analysis'];
     const fullTitles = ['#', 'Title', 'Duration', 'Start', 'Finish', '% Complete', 'Effort Driven'];
 
-    it('should display Example Grid Menu', () => {
+    it('should display Example Frozen Columns & Column Group', () => {
         cy.visit(`${Cypress.config('baseExampleUrl')}/example-frozen-columns-and-column-group.html`);
         cy.get('h2').should('contain', 'Demonstrates:');
         cy.contains('Frozen columns with extra header row grouping columns into categories');

cypress/integration/example-frozen-columns-and-rows.spec.js

@@ -0,0 +1,111 @@
+/// <reference types="cypress" />
+
+describe('Example - Frozen Columns & Rows', { retries: 1 }, () => {
+  // NOTE:  everywhere there's a * 2 is because we have a top+bottom (frozen rows) containers even after Unfreeze Columns/Rows
+
+  const fullTitles = ['#', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Effort Driven', 'Title1', 'Title2', 'Title3', 'Title4'];
+
+  it('should load Example', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/example-frozen-columns-and-rows.html`);
+  });
+
+  it('should have exact column titles on 1st grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have exact Column Header Titles in the grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have a frozen grid with 4 containers on page load with 3 columns on the left and 6 columns on the right', () => {
+    cy.get('[style="top:0px"]').should('have.length', 2 * 2);
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2);
+    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+
+    // top-right
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 5');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:25px"] > .slick-cell:nth(1)').should('contain', 'Task 6');
+
+    // bottom-right
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '5');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:25px"] > .slick-cell:nth(4)').should('contain', '6');
+  });
+
+  it('should change frozen row and increment by 1 and expect changes to be reflected in the grid', () => {
+    cy.get('input#frozenRow').type('{backspace}7');
+    cy.get('button#setFrozenRow').click();
+
+    cy.get('[style="top:0px"]').should('have.length', 2 * 2);
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2);
+    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+
+    // top-right
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 7');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:25px"] > .slick-cell:nth(1)').should('contain', 'Task 8');
+
+    // bottom-right
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '7');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:25px"] > .slick-cell:nth(4)').should('contain', '8');
+  });
+
+  it('should change frozen column and increment by 1 and expect changes to be reflected in the grid', () => {
+    cy.get('input#frozenColumn').type('{backspace}3');
+    cy.get('button#setFrozenColumn').click();
+
+    cy.get('[style="top:0px"]').should('have.length', 2 * 2);
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 4 * 2);
+    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 7 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+
+    // top-right
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 7');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:25px"] > .slick-cell:nth(1)').should('contain', 'Task 8');
+
+    // bottom-right
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '7');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:25px"] > .slick-cell:nth(3)').should('contain', '8');
+  });
+
+  it('should click on "Select first 10 rows" button and expect first few rows to be selected', () => {
+    cy.get('button#btnSelectRows').click();
+    cy.get('.selected').should('have.length', 10 * 11); // 10 rows * 11 columns
+  });
+});

cypress/integration/example-frozen-rows.spec.js

@@ -0,0 +1,94 @@
+/// <reference types="cypress" />
+
+describe('Example - Frozen Rows', { retries: 1 }, () => {
+  // NOTE:  everywhere there's a * 2 is because we have a top+bottom (frozen rows) containers even after Unfreeze Columns/Rows
+
+  const fullTitles = ['#', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Effort Driven', 'Title1', 'Title2', 'Title3', 'Title4'];
+
+  it('should load Example', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/example-frozen-rows.html`);
+  });
+
+  it('should have exact column titles on 1st grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have exact Column Header Titles in the grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have a frozen grid with 4 containers on page load with 3 columns on the left and 6 columns on the right', () => {
+    cy.get('[style="top:0px"]').should('have.length', 2); // top + bottom
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 49995');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '49995');
+  });
+
+  it('should change frozen row and increment by 1 and expect changes to be reflected in the grid', () => {
+    cy.get('input#frozenRow').type('{backspace}7');
+    cy.get('button#setFrozenRow').click();
+
+    cy.get('[style="top:0px"]').should('have.length', 2); // top + bottom
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 49993');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '49993');
+  });
+
+  it('should uncheck "frozen bottom rows" and set it', () => {
+    cy.get('input#frozenBottomRows').uncheck();
+    cy.get('button#setFrozenBottomRows').click();
+
+    cy.get('[style="top:0px"]').should('have.length', 2); // top + bottom
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 7');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '7');
+  });
+});

slick.grid.js

@@ -3434,7 +3434,9 @@ if (typeof Slick === "undefined") {
         queuePostProcessedRowForCleanup(cacheEntry, postProcessedRows[row], row);
       } else {
         cacheEntry.rowNode.each(function() {
-          this.parentElement.removeChild(this);
+          if (this.parentElement) {
+            this.parentElement.removeChild(this);
+          }
         });
       }
 
@@ -3901,7 +3903,7 @@ if (typeof Slick === "undefined") {
           queuePostProcessedCellForCleanup(cellNode, cellToRemove, row);
         } else {
           cellNode.parentElement.removeChild(cellNode);
-        }       
+        }
 
         delete cacheEntry.cellColSpans[cellToRemove];
         delete cacheEntry.cellNodesByColumnIdx[cellToRemove];
@@ -4053,23 +4055,23 @@ if (typeof Slick === "undefined") {
                 rowsCache[rows[i]].rowNode = $()
                     .add($(x.firstChild))
                     .add($(xRight.firstChild));
-                $canvasBottomL[0].append(x.firstChild);
-                $canvasBottomR[0].append(xRight.firstChild);
+                $canvasBottomL[0].appendChild(x.firstChild);
+                $canvasBottomR[0].appendChild(xRight.firstChild);
             } else {
                 rowsCache[rows[i]].rowNode = $()
                     .add($(x.firstChild));
-                $canvasBottomL[0].append($(x.firstChild));
+                $canvasBottomL[0].appendChild(x.firstChild);
             }
         } else if (hasFrozenColumns()) {
             rowsCache[rows[i]].rowNode = $()
                 .add($(x.firstChild))
                 .add($(xRight.firstChild));
-            $canvasTopL[0].append(x.firstChild);
-            $canvasTopR[0].append(xRight.firstChild);
+            $canvasTopL[0].appendChild(x.firstChild);
+            $canvasTopR[0].appendChild(xRight.firstChild);
         } else {
             rowsCache[rows[i]].rowNode = $()
                 .add($(x.firstChild));
-            $canvasTopL[0].append(x.firstChild);
+            $canvasTopL[0].appendChild(x.firstChild);
         }
       }
 
@@ -5210,7 +5212,7 @@ if (typeof Slick === "undefined") {
     function getActiveCellNode() {
       return activeCellNode;
     }
-	  
+
     //This get/set methods are used for keeping text-selection. These don't consider IE because they don't loose text-selection.
     //Fix for firefox selection. See https://github.com/mleibman/SlickGrid/pull/746/files
     function getTextSelection(){