chore: demo onBeforeEditCell returning false (#993)

- related to comments in issue #992
6pac · Feb 22, 2024 · 61e73db · 61e73db
1 parent 6ead4e9
commit 61e73db
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/cypress/e2e/example4-model-esm.cy.ts b/cypress/e2e/example4-model-esm.cy.ts
@@ -1,11 +1,11 @@
 describe('Example 4 - Model (ESM)', () => {
-  const GRID_ROW_HEIGHT = 25;
+  const GRID_ROW_HEIGHT = 28;
   const titles = ['#', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Effort Driven'];
 
   beforeEach(() => {
     // create a console.log spy for later use
     cy.window().then((win) => {
-      cy.spy(win.console, "log");
+      cy.spy(win.console, 'log');
     });
   });
 
@@ -135,4 +135,31 @@ describe('Example 4 - Model (ESM)', () => {
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', '01/05/2009');
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).find('.sgi.sgi-checkbox-intermediate').should('have.length', 1);
   });
+
+  it('should remove pagination and scroll back to top', () => {
+    cy.get('.slick-pager-settings-expanded')
+      .should('be.visible');
+
+    cy.get('.slick-pager-settings-expanded')
+      .contains('All')
+      .click();
+
+    cy.get('.slick-pager-status')
+      .contains('Showing all 50000 rows');
+  });
+
+  it('should expect "Task 19" row to be editable', () => {
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 19').click();
+    cy.get('.slick-large-editor-text textarea').type('Task 2222');
+    cy.get('.slick-large-editor-text #save').click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 2222');
+  });
+
+  it('should expect "Task 18" row to NOT be editable when "onBeforeEditCell" returns false', () => {
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 18}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 18').click();
+    cy.get('.slick-large-editor-text textarea').should('not.exist');
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 18}px;"] > .slick-cell:nth(2)`).should('contain', '5 days').click();
+    cy.get('.editor-text').should('not.exist');
+  });
 });
diff --git a/examples/example4-model-esm.html b/examples/example4-model-esm.html
@@ -111,6 +111,7 @@ <h2>Demonstrates:</h2>
         <li>Handling row selection against model changes.</li>
         <li>Paging.</li>
         <li>inline filter panel</li>
+        <li>block editing of "Task 18" row when <b>onBeforeEditCell</b> returns false</li>
       </ul>
       <strong>Load CSS Theme:</strong>
       <button class="btn-alpine-theme" data-test="theme-alpine-btn">Alpine Theme</button>
@@ -307,6 +308,12 @@ <h2>View Source:</h2>
     dataView.sort(comparer, args.sortAsc);
   });
 
+  grid.onBeforeEditCell.subscribe((e, args) => {
+    if (args.item.title === 'Task 18') {
+      return false;
+    }
+  });
+
   // wire up model events to drive the grid
   // !! both dataView.onRowCountChanged and dataView.onRowsChanged MUST be wired to correctly update the grid
   // see Issue#91