feat: add pageUp/pageDown/home/end to SlickCellSelection, fixes #794 (#…

…854)

* feat: add pageUp/pageDown/home/end to SlickCellSelection, fixes #794
- fixes #794
- adding "pageUp/pageDown/home/end" to SlickCellSelection when using selection with "Shift+{key}"
- add `hasDataView()` and `getViewportRowCount()` methods to SlickGrid and also make `getViewportHeight()` and `getViewportWidth()` as publish methods
- add new `example-spreadsheet-dataview.html` demo to manually test updated Cell Selection feature

cypress/e2e/example-spreadsheet-dataview.cy.ts

@@ -0,0 +1,145 @@
+describe('Example - Spreadsheet with DataView and Cell Selection', { retries: 0 }, () => {
+  const cellHeight = 25;
+  const titles = [
+    '', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
+    'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y',
+    'Z', 'AA', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI', 'AJ', 'AK'
+  ];
+
+  it('should load Example', () => {
+    cy.visit(`${Cypress.config('baseUrl')}/examples/example-spreadsheet-dataview.html`);
+  });
+
+  it('should have exact column titles on grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => {
+        if (index < titles.length) {
+          expect($child.text()).to.eq(titles[index])
+        }
+      });
+  });
+
+  describe('no Pagination - showing all', () => {
+    it('should click on cell B10 and ArrowUp 3 times and ArrowDown 1 time and expect cell selection B8-B10', () => {
+      cy.getCell(10, 2, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+        .as('cell_B10')
+        .click()
+
+      cy.get('@cell_B10')
+        .type('{shift}{uparrow}{uparrow}{uparrow}{downarrow}')
+
+      cy.get('.slick-cell.l2.r2.selected')
+        .should('have.length', 3);
+
+      cy.get('#selectionRange')
+        .should('have.text', '{"fromRow":8,"fromCell":2,"toCell":2,"toRow":10}');
+    });
+
+    it('should click on cell D10 then PageDown 2 times w/selection D10-D46 ', () => {
+      cy.getCell(10, 4, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+        .as('cell_D10')
+        .click()
+
+      cy.get('@cell_D10')
+        .type('{shift}{pagedown}{pagedown}');
+
+      cy.get('#selectionRange')
+        .should('have.text', '{"fromRow":10,"fromCell":4,"toCell":4,"toRow":46}');
+    });
+
+    it('should click on cell D10 then PageDown 3 times then PageUp 1 time w/selection D10-D46', () => {
+      cy.getCell(10, 4, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+        .as('cell_D10')
+        .click()
+
+      cy.get('@cell_D10')
+        .type('{shift}{pagedown}{pagedown}{pagedown}{pageup}');
+
+      cy.get('#selectionRange')
+        .should('have.text', '{"fromRow":10,"fromCell":4,"toCell":4,"toRow":46}');
+    });
+
+    it('should click on cell E12 then End key w/selection E46-E99', () => {
+      cy.getCell(46, 5, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+        .as('cell_E46')
+        .click()
+
+      cy.get('@cell_E46')
+        .type('{shift}{end}');
+
+      cy.get('#selectionRange')
+        .should('have.text', '{"fromRow":46,"fromCell":5,"toCell":5,"toRow":99}');
+    });
+
+    it('should click on cell C85 then End key w/selection C0-C85', () => {
+      cy.getCell(85, 3, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+        .as('cell_C85')
+        .click()
+
+      cy.get('@cell_C85')
+        .type('{shift}{home}');
+
+      cy.get('#selectionRange')
+        .should('have.text', '{"fromRow":0,"fromCell":3,"toCell":3,"toRow":85}');
+    });
+  });
+
+  describe('with Pagination', () => {
+    it('should show Page of size 25', () => {
+      cy.get('.slick-pager-settings .sgi-lightbulb').click();
+      cy.get('[data-val="25"]').click();
+    });
+
+    it('should click on cell B14 then Shift+End w/selection B14-24', () => {
+      cy.getCell(14, 2, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+        .as('cell_B14')
+        .click()
+
+      cy.get('@cell_B14')
+        .type('{shift}{end}');
+
+      cy.get('#selectionRange')
+        .should('have.text', '{"fromRow":14,"fromCell":2,"toCell":2,"toRow":24}');
+    });
+
+    it('should click on cell C19 then Shift+End w/selection C0-19', () => {
+      cy.getCell(19, 2, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+        .as('cell_C19')
+        .click()
+
+      cy.get('@cell_C19')
+        .type('{shift}{home}');
+
+      cy.get('#selectionRange')
+        .should('have.text', '{"fromRow":0,"fromCell":2,"toCell":2,"toRow":19}');
+    });
+
+    it('should click on cell E3 then Shift+PageDown multiple times with current page selection starting at E3 w/selection E3-24', () => {
+      cy.getCell(3, 5, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+        .as('cell_E3')
+        .click()
+
+      cy.get('@cell_E3')
+        .type('{shift}{pagedown}{pagedown}{pagedown}');
+
+      cy.get('#selectionRange')
+        .should('have.text', '{"fromRow":3,"fromCell":5,"toCell":5,"toRow":24}');
+    });
+
+    it('should click on cell D41 then Shift+PageUp multiple times with current page selection w/selection D25-41', () => {
+      cy.get('.slick-pager .sgi-chevron-right').click();
+
+      cy.getCell(15, 4, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+        .as('cell_D41')
+        .click()
+
+      cy.get('@cell_D41')
+        .type('{shift}{pageup}{pageup}{pageup}');
+
+      cy.get('#selectionRange')
+        .should('have.text', '{"fromRow":0,"fromCell":4,"toCell":4,"toRow":15}');
+    });
+  });
+});

cypress/e2e/example-spreadsheet.cy.ts

@@ -0,0 +1,86 @@
+describe('Example - Spreadsheet and Cell Selection', { retries: 0 }, () => {
+  const cellHeight = 25;
+  const titles = [
+    '', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
+    'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y',
+    'Z', 'AA', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI', 'AJ', 'AK'
+  ];
+
+  it('should load Example', () => {
+    cy.visit(`${Cypress.config('baseUrl')}/examples/example-spreadsheet.html`);
+  });
+
+  it('should have exact column titles on grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => {
+        if (index < titles.length) {
+          expect($child.text()).to.eq(titles[index])
+        }
+      });
+  });
+
+  it('should click on cell B10 and ArrowUp 3 times and ArrowDown 1 time and expect cell selection B8-B10', () => {
+    cy.getCell(10, 2, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+      .as('cell_B10')
+      .click()
+
+    cy.get('@cell_B10')
+      .type('{shift}{uparrow}{uparrow}{uparrow}{downarrow}')
+
+    cy.get('.slick-cell.l2.r2.selected')
+      .should('have.length', 3);
+
+    cy.get('#selectionRange')
+      .should('have.text', '{"fromRow":8,"fromCell":2,"toCell":2,"toRow":10}');
+  });
+
+  it('should click on cell D10 then PageDown 2 times w/selection D10-D46 ', () => {
+    cy.getCell(10, 4, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+      .as('cell_D10')
+      .click()
+
+    cy.get('@cell_D10')
+      .type('{shift}{pagedown}{pagedown}');
+
+    cy.get('#selectionRange')
+      .should('have.text', '{"fromRow":10,"fromCell":4,"toCell":4,"toRow":46}');
+  });
+
+  it('should click on cell D10 then PageDown 3 times then PageUp 1 time w/selection D10-D46', () => {
+    cy.getCell(10, 4, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+      .as('cell_D10')
+      .click()
+
+    cy.get('@cell_D10')
+      .type('{shift}{pagedown}{pagedown}{pagedown}{pageup}');
+
+    cy.get('#selectionRange')
+      .should('have.text', '{"fromRow":10,"fromCell":4,"toCell":4,"toRow":46}');
+  });
+
+  it('should click on cell E12 then End key w/selection E46-E99', () => {
+    cy.getCell(46, 5, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+      .as('cell_E46')
+      .click()
+
+    cy.get('@cell_E46')
+      .type('{shift}{end}');
+
+    cy.get('#selectionRange')
+      .should('have.text', '{"fromRow":46,"fromCell":5,"toCell":5,"toRow":99}');
+  });
+
+  it('should click on cell C85 then End key w/selection C0-C85', () => {
+    cy.getCell(85, 3, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
+      .as('cell_C85')
+      .click()
+
+    cy.get('@cell_C85')
+      .type('{shift}{home}');
+
+    cy.get('#selectionRange')
+      .should('have.text', '{"fromRow":0,"fromCell":3,"toCell":3,"toRow":85}');
+  });
+});

examples/example-frozen-columns-and-rows-spreadsheet.html

@@ -39,6 +39,13 @@ <h2>
       <li>Use Ctrl-C and Ctrl-V keyboard shortcuts to cut and paste cells</li>
       <li>Use Esc to cancel a copy and paste operation</li>
       <li>Edit the cell and select a cell range to paste the range</li>
+      <li>Cell Selection using "Shift+{key}" where "key" can be any of:</li>
+      <ul>
+        <li>Arrow Up/Down/Left/Right</li>
+        <li>Page Up/Down</li>
+        <li>Home</li>
+        <li>End</li>
+      </ul>
     </ul>
   </div>
 </div>
@@ -90,7 +97,7 @@ <h2>
   /***
    * A proof-of-concept cell editor with Excel-like range selection and insertion.
    */
-  function FormulaEditor(args) {
+   function FormulaEditor(args) {
     var _self = this;
     var _editor = new Slick.Editors.Text(args);
     var _selector;
@@ -113,23 +120,41 @@ <h2>
       _editor.destroy();
     };
 
+    this.isValueChanged = function() {
+      return _editor.isValueChanged();
+    };
+
+    this.loadValue = function (item) {
+      _editor.loadValue(item);
+    };
+
+    this.applyValue = function(item, state) {
+      return _editor.applyValue(item, state);
+    };
+
+    this.serializeValue = function() {
+      return _editor.serializeValue();
+    };
+
+    this.validate = function() {
+      return _editor.validate();
+    };
+
     this.handleCellRangeSelected = function (e, args) {
       _editor.setValue(
           _editor.getValue() +
-          grid.getColumns()[args.range.fromCell].name +
-          args.range.fromRow +
-          ":" +
-          grid.getColumns()[args.range.toCell].name +
-          args.range.toRow
+              grid.getColumns()[args.range.fromCell].name +
+              args.range.fromRow +
+              ":" +
+              grid.getColumns()[args.range.toCell].name +
+              args.range.toRow
       );
     };
 
-
     init();
   }
 
-
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", () => {
     for (var i = 0; i < 100; i++) {
       var d = (data[i] = {});
       d["num"] = i;