chore: make Example 19 grid editable

Author: ghiscoding

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

@@ -19,6 +19,10 @@ <h6 class="title is-6">
     <span class="icon mdi mdi-swap-vertical"></span>
     <span>Toggle Pagination</span>
   </button>
+  <button class="button is-small" onclick.delegate="toggleGridEditReadonly()" data-test="toggle-readonly-btn">
+    <span class="icon mdi mdi-table-edit"></span>
+    <span>Toggle Edit/Readonly Grid</span>
+  </button>
   <label class="ml-3">Range Selection</label>
   <span id="selectionRange"></span>
 </h6>

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

@@ -1,9 +1,10 @@
-import { type Column, type GridOption, SlickEventHandler } from '@slickgrid-universal/common';
+import { type Column, type GridOption, SlickEventHandler, Editors } from '@slickgrid-universal/common';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 import { ExampleGridOptions } from './example-grid-options';
 import './example19.scss';
 
 const NB_ITEMS = 100;
+
 export default class Example19 {
   protected _eventHandler: SlickEventHandler;
 
@@ -13,6 +14,7 @@ export default class Example19 {
   gridContainerElm: HTMLDivElement;
   isWithPagination = true;
   sgb: SlickVanillaGridBundle;
+  isGridEditable = true;
 
   attached() {
     this._eventHandler = new SlickEventHandler();
@@ -52,7 +54,7 @@ export default class Example19 {
         id: 'selector',
         name: '',
         field: 'num',
-        width: 30
+        width: 30,
       }
     ];
 
@@ -62,9 +64,10 @@ export default class Example19 {
         name: i < 26
           ? String.fromCharCode('A'.charCodeAt(0) + (i % 26))
           : String.fromCharCode('A'.charCodeAt(0) + (Math.floor(i / 26)) - 1) + String.fromCharCode('A'.charCodeAt(0) + (i % 26)),
-        field: i as any,
+        field: String(i),
         minWidth: 60,
         width: 60,
+        editor: { model: Editors.text }
       });
     }
 
@@ -74,6 +77,8 @@ export default class Example19 {
       },
       enableCellNavigation: true,
       enablePagination: true,
+      autoEdit: true,
+      editable: this.isGridEditable,
       pagination: {
         pageSizes: [5, 10, 15, 20, 25, 50, 75, 100],
         pageSize: 20
@@ -119,4 +124,11 @@ export default class Example19 {
     this.sgb.paginationService!.togglePaginationVisibility(this.isWithPagination);
     this.sgb.slickGrid!.setSelectedRows([]);
   }
+
+  toggleGridEditReadonly() {
+    // then change a single grid options to make the grid non-editable (readonly)
+    this.isGridEditable = !this.isGridEditable;
+    this.sgb.gridOptions = { editable: this.isGridEditable };
+    this.gridOptions = this.sgb.gridOptions;
+  }
 }

test/cypress/e2e/example19.cy.ts

@@ -22,6 +22,10 @@ describe('Example 19 - ExcelCopyBuffer with Cell Selection', () => {
       });
   });
 
+  it('should make grid readonly and not editable', () => {
+    cy.get('[data-test="toggle-readonly-btn"]').click();
+  });
+
   describe('with Pagination of size 20', () => {
     it('should click on cell B14 then Ctrl+Shift+End with selection B14-CV19', () => {
       cy.getCell(14, 2, '', { parentSelector: '.grid19', rowHeight: GRID_ROW_HEIGHT })