diff --git a/cypress/e2e/example4-model-esm.cy.ts b/cypress/e2e/example4-model-esm.cy.ts index 67146a48..0217da03 100644 --- 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 index 40902015..a177966a 100644 --- a/examples/example4-model-esm.html +++ b/examples/example4-model-esm.html @@ -111,6 +111,7 @@

Demonstrates:

  • Handling row selection against model changes.
  • Paging.
  • inline filter panel
  • +
  • block editing of "Task 18" row when onBeforeEditCell returns false
  • Load CSS Theme: @@ -307,6 +308,12 @@

    View Source:

    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