From 5aa693435facfcb5d548cb0aa27dfd7aee0c88ca Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 27 Dec 2023 19:18:50 -0500 Subject: [PATCH] fix: `updateColumns()` should be public use with column hidden --- .../src/core/__tests__/slickGrid.spec.ts | 28 ++++++++++++- packages/common/src/core/slickGrid.ts | 39 +++++++++---------- 2 files changed, 45 insertions(+), 22 deletions(-) diff --git a/packages/common/src/core/__tests__/slickGrid.spec.ts b/packages/common/src/core/__tests__/slickGrid.spec.ts index 83b117230..13f3b944d 100644 --- a/packages/common/src/core/__tests__/slickGrid.spec.ts +++ b/packages/common/src/core/__tests__/slickGrid.spec.ts @@ -160,7 +160,7 @@ describe('SlickGrid core file', () => { }); it('should be able to instantiate SlickGrid and invalidate some rows', () => { - const columns = [{ id: 'firstName', field: 'firstName', name: 'First Name' }] as Column[]; + const columns = [{ id: 'firstName', field: 'firstName', name: 'First Name', cellAttrs: { 'cell-attr': 22 }, }] as Column[]; const options = { enableCellNavigation: true, devMode: { ownerNodeIndex: 0 } } as GridOption; const data = [{ id: 0, firstName: 'John' }, { id: 1, firstName: 'Jane' }]; @@ -171,8 +171,9 @@ describe('SlickGrid core file', () => { grid.setData(data); grid.invalidate(); + const cellElms = container.querySelectorAll('.slick-cell.l0.r0'); - expect(grid).toBeTruthy(); + expect(cellElms[0].getAttribute('cell-attr')).toBe('22'); expect(invalidSpy).toHaveBeenCalled(); expect(updateSpy).toHaveBeenCalled(); expect(renderSpy).toHaveBeenCalled(); @@ -882,6 +883,29 @@ describe('SlickGrid core file', () => { expect(result).toBe(80 * 2); }); + it('should return visible columns', () => { + const columns = [ + { id: 'firstName', field: 'firstName', name: 'First Name', hidden: true }, + { id: 'lastName', field: 'lastName', name: 'Last Name' }, + { id: 'age', field: 'age', name: 'age' }, + ] as Column[]; + grid = new SlickGrid(container, [], columns, { ...options, frozenColumn: 1 }); + const updateSpy = jest.spyOn(grid.onBeforeUpdateColumns, 'notify'); + grid.updateColumns(); + expect(grid.getVisibleColumns().length).toBe(2); + + const newColumns = [ + { id: 'firstName', field: 'firstName', name: 'First Name', hidden: false }, + { id: 'lastName', field: 'lastName', name: 'Last Name', hidden: true }, + { id: 'age', field: 'age', name: 'age', hidden: true }, + ] as Column[]; + grid.setColumns(newColumns); + + expect(updateSpy).toHaveBeenCalled(); + expect(grid.getHeader()[0]).toBeInstanceOf(HTMLDivElement); + expect(grid.getVisibleColumns().length).toBe(1); + }); + it('should return full grid width when fullWidthRows is enabled even with frozenColumn defined', () => { const columns = [ { id: 'firstName', field: 'firstName', name: 'First Name', hidden: true }, diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts index 208531165..668a7965e 100644 --- a/packages/common/src/core/slickGrid.ts +++ b/packages/common/src/core/slickGrid.ts @@ -2345,6 +2345,8 @@ export class SlickGrid = Column, O e ]; const sheet = this._style.sheet; + + /* istanbul ignore else */ if (sheet) { rules.forEach(rule => { sheet.insertRule(rule); @@ -2356,7 +2358,6 @@ export class SlickGrid = Column, O e sheet.insertRule(`.${this.uid} .l${i} { }`); sheet.insertRule(`.${this.uid} .r${i} { }`); } - /* istanbul ignore else */ } else { // fallback in case the 1st approach doesn't work, let's use our previous way of creating the css rules which is what works in Salesforce :( this.createCssRulesAlternative(rules); @@ -2763,24 +2764,22 @@ export class SlickGrid = Column, O e } protected applyColumnHeaderWidths() { - if (!this.initialized) { - return; - } - - let columnIndex = 0; - const vc = this.getVisibleColumns(); - this._headers.forEach((header) => { - for (let i = 0; i < header.children.length; i++, columnIndex++) { - const h = header.children[i] as HTMLElement; - const col = vc[columnIndex] || {}; - const width = (col.width || 0) - this.headerColumnWidthDiff; - if (Utils.width(h) !== width) { - Utils.width(h, width); + if (this.initialized) { + let columnIndex = 0; + const vc = this.getVisibleColumns(); + this._headers.forEach((header) => { + for (let i = 0; i < header.children.length; i++, columnIndex++) { + const h = header.children[i] as HTMLElement; + const col = vc[columnIndex] || {}; + const width = (col.width || 0) - this.headerColumnWidthDiff; + if (Utils.width(h) !== width) { + Utils.width(h, width); + } } - } - }); + }); - this.updateColumnCaches(); + this.updateColumnCaches(); + } } protected applyColumnWidths() { @@ -2991,7 +2990,8 @@ export class SlickGrid = Column, O e this.updateColumnsInternal(); } - protected updateColumns() { + /** Update columns for when a hidden property has changed but the column list itself has not changed. */ + updateColumns() { this.trigger(this.onBeforeUpdateColumns, { columns: this.columns, grid: this }); this.updateColumnsInternal(); } @@ -3003,7 +3003,6 @@ export class SlickGrid = Column, O e if (this.initialized) { this.setPaneVisibility(); this.setOverflow(); - this.invalidateAllRows(); this.createColumnHeaders(); this.createColumnFooter(); @@ -3342,7 +3341,7 @@ export class SlickGrid = Column, O e (row % 2 === 1 ? ' odd' : ' even'); if (!d) { - rowCss += ' ' + this._options.addNewRowCssClass; + rowCss += ` ${this._options.addNewRowCssClass}`; } const metadata = (this.data as CustomDataView)?.getItemMetadata?.(row);