WIP - fix(dataView): add option to apply row selection to all pages

controls/slick.gridmenu.js

@@ -131,7 +131,6 @@
     var _gridOptions;
     var _gridUid = (grid && grid.getUID) ? grid.getUID() : '';
     var _isMenuOpen = false;
-    var _options = options;
     var _self = this;
     var $customTitleElm;
     var $columnTitleElm;
@@ -156,6 +155,7 @@
         return columnDef.name;
       }
     };
+    var _options = $.extend(true, {}, {gridMenu: _defaults}, options);
 
     // when a grid optionally changes from a regular grid to a frozen grid, we need to destroy & recreate the grid menu
     // we do this change because the Grid Menu is on the left container for a regular grid, it is however on the right container for a frozen grid

cypress/integration/example-checkbox-header-row.spec.js

@@ -66,7 +66,7 @@ describe('Example - Checkbox Header Row', () => {
   });
 
   it('should click on Select All and display previous and new selected rows', () => {
-    const expectedRows = '1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,93,95,97,99';
+    const expectedRows = '1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,93,95,97,99,101,103,105,107,109,111,113,115,117,119,121,123,125,127,129,131,133,135,137,139,141,143,145,147,149';
 
     cy.get('#filter-checkbox-selectall-container input[type=checkbox]')
       .click({ force: true });
@@ -82,20 +82,188 @@ describe('Example - Checkbox Header Row', () => {
   });
 
   it('should click on Select All again and expect no new selected rows', () => {
-    const expectedPreviousRows = '1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,93,95,97,99';
+    const expectedPreviousRows = '1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,93,95,97,99,101,103,105,107,109,111,113,115,117,119,121,123,125,127,129,131,133,135,137,139,141,143,145,147,149';
 
     cy.get('#filter-checkbox-selectall-container input[type=checkbox]')
       .click({ force: true });
 
     cy.get('#selectedRows')
-    .invoke('text').then((text => {
+      .invoke('text').then((text => {
         expect(text.trim()).to.eq('')
-    }));
+      }));
 
     cy.window().then((win) => {
       expect(win.console.log).to.have.callCount(2);
       expect(win.console.log).to.be.calledWith(`Previously Selected Rows: ${expectedPreviousRows}`);
       expect(win.console.log).to.be.calledWith('Selected Rows: ');
     });
   });
+
+  it('Should display "Showing page 1 of 6" text after changing Pagination to 25 items per page', () => {
+    cy.get('.ui-icon-lightbulb')
+      .click();
+
+    cy.get('.slick-pager-settings-expanded')
+      .should('be.visible');
+
+    cy.get('.slick-pager-settings-expanded')
+      .contains('25')
+      .click();
+
+    cy.get('.slick-pager-status')
+      .contains('Showing page 1 of 6');
+  });
+
+  it('should click on "Select All" checkbox and expect all rows selected in current page', () => {
+    const expectedRows = '1,3,5,7,9,11,13,15,17,19,21,23';
+
+    cy.get('#filter-checkbox-selectall-container input[type=checkbox]')
+      .click({ force: true });
+
+    cy.get('#selectedRows')
+      .contains(expectedRows);
+
+    cy.window().then((win) => {
+      expect(win.console.log).to.have.callCount(2);
+      expect(win.console.log).to.be.calledWith('Previously Selected Rows: ');
+      expect(win.console.log).to.be.calledWith(`Selected Rows: ${expectedRows}`);
+    });
+  });
+
+  it('should go to next page and still expect all rows selected in current page', () => {
+    cy.get('.ui-icon-seek-next')
+      .click();
+
+    cy.get('.slick-cell-checkboxsel input:checked')
+      .should('have.length', 11);
+  });
+
+  it('should go to last page and still expect all rows selected in current page', () => {
+    cy.get('.ui-icon-seek-end')
+      .click();
+
+    cy.get('.slick-cell-checkboxsel input:checked')
+      .should('have.length', 11);
+
+    cy.get('.slick-pager-status')
+      .contains('Showing page 6 of 6');
+
+    cy.get('#selectedRows')
+      .should('contain', '0,2,4,6,8,10,12,14,16,18,20,22,24');
+
+    cy.get('#selectedIds')
+      .should('contain', '9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,93,95,97,99,101,103,105,107');
+  });
+
+  it('should uncheck first checkbox and expect the "Select All" button to be unchecked', () => {
+    cy.get('#filter-checkbox-selectall-container input[type=checkbox]')
+      .should('be.checked');
+
+    cy.get('.slick-row:nth(0) .slick-cell:nth(0) input[type=checkbox]')
+      .click({ force: true });
+
+    cy.get('#filter-checkbox-selectall-container input[type=checkbox]')
+      .should('not.be.checked');
+
+    cy.get('.slick-cell-checkboxsel input:checked')
+      .should('have.length', 10);
+
+    cy.get('#selectedRows')
+      .should('contain', '2,4,6,8,10,12,14,16,18,20,22,24');
+
+    cy.get('#selectedIds')
+      .should('contain', '9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,93,95,97,99,101,103,105,107,109,111,113,115,117,119,121,123,125,127,129,131,135,137,139,141,143,145,147,149,151,153,155,157');
+  });
+
+  it('should go back to first page and still expect all rows selected in current page', () => {
+    cy.get('.ui-icon-seek-first')
+      .click();
+
+    cy.get('#filter-checkbox-selectall-container input[type=checkbox]')
+      .should('not.be.checked');
+
+    cy.get('.slick-cell-checkboxsel input:checked')
+      .should('have.length', 11);
+
+    cy.get('.slick-pager-status')
+      .contains('Showing page 1 of 6');
+
+    cy.get('#selectedRows')
+      .should('contain', '1,3,5,7,9,11,13,15,17,19,21,23');
+
+    cy.get('#selectedIds')
+      .should('contain', '9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,93,95,97,99,101,103,105,107,109,111,113,115,117,119,121,123,125,127,129,131,135,137,139,141,143,145,147,149,151,153,155,157');
+  });
+
+  it('should go back to last page then re-select the first row and expect "Select All" to be checked', () => {
+    cy.get('.ui-icon-seek-end')
+      .click();
+
+    cy.get('.slick-row:nth(0) .slick-cell:nth(0) input[type=checkbox]')
+      .click({ force: true });
+
+    cy.get('#filter-checkbox-selectall-container input[type=checkbox]')
+      .should('be.checked');
+
+    cy.get('.slick-cell-checkboxsel input:checked')
+      .should('have.length', 11);
+
+    cy.get('.slick-pager-status')
+      .contains('Showing page 6 of 6');
+
+    cy.get('#selectedRows')
+      .should('contain', '0,2,4,6,8,10,12,14,16,18,20,22,24');
+
+    cy.get('#selectedIds')
+      .should('contain', '9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,93,95,97,99,101,103,105,107');
+  });
+
+  it('should have lower count of selected Ids after filtering data', () => {
+    let prevSelectedIdsCount = 0;
+    let newSelectedIdsCount = 0;
+    let prevSelectedRowsCount = 0;
+    let newSelectedRowsCount = 0;
+
+    cy.get('#idsCount')
+      .then($elm => {
+        console.log($elm)
+        prevSelectedIdsCount = +$elm[0].textContent;
+        expect(prevSelectedIdsCount).to.be.greaterThan(0);
+      });
+
+    cy.get('#rowsCount')
+      .then($elm => {
+        console.log($elm)
+        prevSelectedRowsCount = +$elm[0].textContent;
+        expect(prevSelectedRowsCount).to.be.greaterThan(0);
+        expect(prevSelectedIdsCount).not.to.be.eq(prevSelectedRowsCount);
+      });
+
+    cy.get('.slick-pager-status')
+      .should('not.contain', 'Showing page 1 of 1');
+
+    cy.get('#myGrid')
+      .find('.slick-headerrow-column.l1.r1')
+      .find('input')
+      .type('5');
+
+    cy.get('#idsCount')
+      .then($elm => {
+        newSelectedIdsCount = +$elm[0].textContent;
+        expect(newSelectedIdsCount).to.be.lessThan(prevSelectedIdsCount);
+      });
+
+    cy.get('#rowsCount')
+      .then($elm => {
+        newSelectedRowsCount = +$elm[0].textContent;
+      });
+
+    cy.get('.slick-pager-status')
+      .then($elm => {
+        const pagerInfo = $elm[0].textContent;
+        if (pagerInfo === 'Showing page 1 of 1') {
+          expect(newSelectedIdsCount).to.be.eq(newSelectedRowsCount);
+        }
+      });
+  });
 });

examples/example-checkbox-header-row.html

@@ -5,6 +5,7 @@
   <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
   <link rel="stylesheet" href="../css/smoothness/jquery-ui.css" type="text/css"/>
   <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../controls/slick.pager.css" type="text/css" />
   <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
   <link rel="stylesheet" href="examples.css" type="text/css"/>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
@@ -69,6 +70,7 @@
 <div style="position:relative">
   <div style="width:600px;">
     <div id="myGrid" style="width:100%;height:500px;"></div>
+    <div id="pager" style="width:100%;height:20px;"></div>
   </div>
 
   <div class="options-panel">
@@ -92,8 +94,13 @@ <h2>View Source:</h2>
 
     <hr/>
 
-    <h3>Selected Rows:</h3>
+    <h3>Selected Rows (<span id="rowsCount">0</span>):</h3>
     <div id="selectedRows" style="overflow-x: auto;"></div>
+
+    <hr/>
+
+    <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="idOffset"></span>:</h3>
+    <div id="selectedIds" style="overflow-x: auto;"></div>
   </div>
 </div>
 
@@ -105,6 +112,7 @@ <h3>Selected Rows:</h3>
 
 <script src="../plugins/slick.checkboxselectcolumn.js"></script>
 <script src="../plugins/slick.rowselectionmodel.js"></script>
+<script src="../controls/slick.pager.js"></script>
 <script src="../controls/slick.columnpicker.js"></script>
 
 <script src="../slick.core.js"></script>
@@ -126,9 +134,14 @@ <h3>Selected Rows:</h3>
   var checkboxSelector;
   var isSelectAllCheckboxHidden = false;
   var isSelectAllShownAsColumnTitle = false;
+
+  // add an offset so that the IDs are not equal to the row number, to fully validate that DataView selected IDs work as intended
+  var idOffset = 8;
+  $('#idOffset').text(idOffset);
 
   checkboxSelector = new Slick.CheckboxSelectColumn({
     cssClass: "slick-cell-checkboxsel",
+    applySelectOnAllPages: true, // defaults to false, when that is enabled the "Select All" will be applied to all pages
     hideInColumnTitleRow: !isSelectAllShownAsColumnTitle,
     hideInFilterHeaderRow: isSelectAllShownAsColumnTitle,
 
@@ -142,7 +155,7 @@ <h3>Selected Rows:</h3>
 
   for (var i = 0; i < 10; i++) {
     columns.push({
-      id: i,
+      id: i + idOffset,
       name: String.fromCharCode("A".charCodeAt(0) + i),
       field: i,
       width: 60
@@ -175,9 +188,9 @@ <h3>Selected Rows:</h3>
   }
 
   $(function () {
-    for (var i = 0; i < 100; i++) {
+    for (var i = 0; i < 150; i++) {
       var d = (data[i] = {});
-      d["id"] = i;
+      d["id"] = i + idOffset;
       for (var j = 0; j < columns.length; j++) {
         d[j] = Math.round(Math.random() * 10);
       }
@@ -187,7 +200,9 @@ <h3>Selected Rows:</h3>
     grid = new Slick.Grid("#myGrid", dataView, columns, options);
     grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
     grid.registerPlugin(checkboxSelector);
+    dataView.syncGridSelection(grid, true, true);
 
+    var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
     var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
 
 
@@ -208,6 +223,14 @@ <h3>Selected Rows:</h3>
       console.log("Previously Selected Rows: " + previousSelectedRows.toString());
       console.log("Selected Rows: " + sortedSelectedRows.toString());
       $('#selectedRows').text(sortedSelectedRows.toString());
+      $('#rowsCount').text(sortedSelectedRows.length); 
+    });
+
+    dataView.onSelectedRowIdsChanged.subscribe(function(e, args) {
+      var sortedSelectedIds = args.filteredIds.sort(function (a, b) { return a - b });
+      // console.log("Selected Ids: " + sortedSelectedIds.toString());
+      $('#selectedIds').text(sortedSelectedIds.toString());
+      $('#idsCount').text(sortedSelectedIds.length); 
     });
 
     $(grid.getHeaderRow()).on("change keyup", ":input", function (e) {