chore: add Row Selection count to demo

Author: ghiscoding

examples/vite-demo-vanilla-bundle/src/examples/example21.html

@@ -36,6 +36,11 @@ <h3 class="title is-3">
       <label for="server-delay">Simulated Server Delay (ms): </label>
       <input type="number" id="server-delay" class="is-narrow input is-small" data-test="server-delay" value.bind="serverApiDelay">
     </span>
+
+    <span class="ml-2">
+      <label>Selected Rows:</label>
+      <span textcontent.bind="selectedRowString" data-test="row-selections"></span>
+    </span>
   </div>
 
   <div class="column is-narrow">

examples/vite-demo-vanilla-bundle/src/examples/example21.ts

@@ -32,6 +32,7 @@ export default class Example21 {
   columnDefinitions!: Column<Item>[];
   dataset!: Item[];
   sgb!: SlickVanillaGridBundle;
+  selectedRowString = '';
   serverApiDelay = 400;
   status = '';
   statusClass = '';
@@ -55,6 +56,12 @@ export default class Example21 {
 
     // add all row detail event listeners
     this.addRowDetailEventHandlers();
+    this._bindingEventService.bind(this.gridContainerElm, 'onselectedrowschanged', () => {
+      this.selectedRowString = this.sgb.slickGrid?.getSelectedRows().join(',') || '';
+      if (this.selectedRowString.length > 50) {
+        this.selectedRowString = this.selectedRowString.substring(0, 50) + '...';
+      }
+    });
   }
 
   dispose() {

test/cypress/e2e/example21.cy.ts

@@ -392,4 +392,12 @@ describe('Example 21 - Row Detail View', () => {
     cy.get('.dynamic-cell-detail')
       .should('have.length', 0);
   });
+
+  it('should be able to select any rows, i.e.: row 2 and 4', () => {
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).click();
+
+    cy.get('[data-test="row-selections"]')
+      .contains('2,4');
+  });
 });