diff --git a/demos/aurelia/src/examples/slickgrid/example19.ts b/demos/aurelia/src/examples/slickgrid/example19.ts index 689040961..89ad7d3fa 100644 --- a/demos/aurelia/src/examples/slickgrid/example19.ts +++ b/demos/aurelia/src/examples/slickgrid/example19.ts @@ -135,7 +135,6 @@ export class Example19 { datasetIdPropertyName: 'rowId', // optionally use a different "id" externalResources: [AureliaRowDetailView], rowDetailView: { - renderMode: 'overlay', // optionally change the column index position of the icon (defaults to 0) // columnIndexPosition: 1, diff --git a/demos/aurelia/src/examples/slickgrid/example45.ts b/demos/aurelia/src/examples/slickgrid/example45.ts index 1ff313adf..f7cab35b2 100644 --- a/demos/aurelia/src/examples/slickgrid/example45.ts +++ b/demos/aurelia/src/examples/slickgrid/example45.ts @@ -105,7 +105,6 @@ export class Example45 { rowHeight: 33, externalResources: [AureliaRowDetailView], rowDetailView: { - renderMode: 'overlay', process: (item) => this.simulateServerAsyncCall(item), loadOnce: false, // you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events useRowClick: false, diff --git a/demos/react-fluent/src/examples/slickgrid/Example04.tsx b/demos/react-fluent/src/examples/slickgrid/Example04.tsx index 914c340ee..6a17b2598 100644 --- a/demos/react-fluent/src/examples/slickgrid/Example04.tsx +++ b/demos/react-fluent/src/examples/slickgrid/Example04.tsx @@ -169,7 +169,6 @@ const Example04: React.FC = () => { return [{ name: 'rowDetailView', instance: rowDetail }]; }, rowDetailView: { - renderMode: 'overlay', process: (item) => simulateServerAsyncCall(item), loadOnce: true, singleRowExpand: false, diff --git a/demos/react/src/examples/slickgrid/Example19.tsx b/demos/react/src/examples/slickgrid/Example19.tsx index db2c70813..fb6d5a58c 100644 --- a/demos/react/src/examples/slickgrid/Example19.tsx +++ b/demos/react/src/examples/slickgrid/Example19.tsx @@ -168,7 +168,6 @@ const Example19: React.FC = () => { return [{ name: 'rowDetailView', instance: rowDetail }]; }, rowDetailView: { - renderMode: 'overlay', process: (item) => simulateServerAsyncCall(item), loadOnce: true, singleRowExpand: false, diff --git a/demos/react/src/examples/slickgrid/Example45.tsx b/demos/react/src/examples/slickgrid/Example45.tsx index 29f89b523..68229f22d 100644 --- a/demos/react/src/examples/slickgrid/Example45.tsx +++ b/demos/react/src/examples/slickgrid/Example45.tsx @@ -163,7 +163,6 @@ const Example45: React.FC = () => { return [{ name: 'rowDetailView', instance: rowDetail }]; }, rowDetailView: { - renderMode: 'overlay', process: (item) => simulateServerAsyncCall(item), loadOnce: false, useRowClick: false, diff --git a/demos/vanilla/src/examples/example20.ts b/demos/vanilla/src/examples/example20.ts index d898c4632..308ab50de 100644 --- a/demos/vanilla/src/examples/example20.ts +++ b/demos/vanilla/src/examples/example20.ts @@ -176,7 +176,6 @@ export default class Example20 { rowHeight: 33, // rowTopOffsetRenderType: 'top', // no longer necessary with v10.10.0 and above; otherwise, uncomment this line rowDetailView: { - renderMode: 'overlay', columnIndexPosition: 1, preTemplate: this.loadingTemplate.bind(this), postTemplate: this.loadView.bind(this), diff --git a/demos/vanilla/src/examples/example21.ts b/demos/vanilla/src/examples/example21.ts index bfdbc2da6..013152f6f 100644 --- a/demos/vanilla/src/examples/example21.ts +++ b/demos/vanilla/src/examples/example21.ts @@ -140,7 +140,6 @@ export default class Example21 { // rowTopOffsetRenderType: 'top', // no longer necessary with v10.10.0 and above; otherwise, uncomment this line rowHeight: 33, rowDetailView: { - renderMode: 'overlay', loadOnce: false, // you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events preTemplate: () => this.loadingTemplate(), postTemplate: (itemDetail) => createDomElement('div', { className: `container_${itemDetail.id}` }), diff --git a/demos/vanilla/src/examples/example36.ts b/demos/vanilla/src/examples/example36.ts index eb5e8aad9..451b72064 100644 --- a/demos/vanilla/src/examples/example36.ts +++ b/demos/vanilla/src/examples/example36.ts @@ -198,7 +198,6 @@ export default class Example36 { rowHeight: 33, // rowTopOffsetRenderType: 'top', // no longer necessary with v10.10.0 and above; otherwise, uncomment this line rowDetailView: { - renderMode: 'overlay', columnIndexPosition: 1, preTemplate: this.loadingTemplate.bind(this), postTemplate: this.loadView.bind(this), diff --git a/demos/vue/src/components/Example19.vue b/demos/vue/src/components/Example19.vue index 9f1aec71e..d9f1a7dc0 100644 --- a/demos/vue/src/components/Example19.vue +++ b/demos/vue/src/components/Example19.vue @@ -121,7 +121,6 @@ function defineGrid() { datasetIdPropertyName: 'rowId', // optionally use a different "id" externalResources: [VueRowDetailView], rowDetailView: { - renderMode: 'overlay', // optionally change the column index position of the icon (defaults to 0) // columnIndexPosition: 1, diff --git a/demos/vue/src/components/Example45.vue b/demos/vue/src/components/Example45.vue index 156676300..7b7ee7ce3 100644 --- a/demos/vue/src/components/Example45.vue +++ b/demos/vue/src/components/Example45.vue @@ -98,7 +98,6 @@ function defineGrid() { rowHeight: 33, externalResources: [VueRowDetailView], rowDetailView: { - renderMode: 'overlay', process: (item: any) => simulateServerAsyncCall(item), loadOnce: false, // you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events useRowClick: false, diff --git a/docs/grid-functionalities/row-detail.md b/docs/grid-functionalities/row-detail.md index 08301aee1..578ea697d 100644 --- a/docs/grid-functionalities/row-detail.md +++ b/docs/grid-functionalities/row-detail.md @@ -26,22 +26,21 @@ A Row Detail allows you to open a detail panel which can contain extra and/or mo ### Transform-compatible rendering -Row Detail panels use the `overlay` render mode in the examples. The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows when `rowTopOffsetRenderType` is `transform`. +Row Detail automatically uses the `overlay` render mode when `rowTopOffsetRenderType` is `transform` (the default). The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows. No additional Row Detail option is required. ```ts const gridOptions: GridOption = { enableRowDetailView: true, rowTopOffsetRenderType: 'transform', rowDetailView: { - renderMode: 'overlay', // ... other Row Detail options } }; ``` -`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. It will be removed in the next major release. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly. +`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. Explicitly selecting it makes SlickGrid use `rowTopOffsetRenderType: 'top'` for compatibility. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly. -**v11 transition:** `renderMode: 'overlay'` is the permanent rendering approach, but the option is currently a v10 opt-in. In v11, overlay rendering is planned to become the default and only Row Detail renderer, so `renderMode: 'overlay'` will no longer be necessary and the option may be removed. Keep the option while using v10 and remove it when upgrading to v11 if it is removed from the API. +**v11 transition:** Overlay rendering is the permanent rendering approach. In v11, it is planned to become the only Row Detail renderer, so `renderMode` may be removed from the API. ### Keeping Row Detail Components Alive During Scrolling @@ -127,7 +126,6 @@ export default class Example21 { return [{ name: 'rowDetailView', instance: this.rowDetail }]; }, rowDetailView: { - renderMode: 'overlay', // We can load the "process" asynchronously via Fetch, Promise, ... process: (item) => http.get(`api/item/${item.id}`), @@ -294,7 +292,6 @@ export class Example { return [{ name: 'rowDetailView', instance: rowDetail }]; }, rowDetailView: { - renderMode: 'overlay', // We can load the "process" asynchronously via Fetch, Promise, ... process: (item) => http.get(`api/item/${item.id}`), diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md b/frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md index 46ae122a2..b08a8c840 100644 --- a/frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md +++ b/frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md @@ -25,22 +25,21 @@ A Row Detail allows you to open a detail panel which can contain extra and/or mo ### Transform-compatible rendering -Row Detail panels use the `overlay` render mode in the examples. The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows when `rowTopOffsetRenderType` is `transform`. +Row Detail automatically uses the `overlay` render mode when `rowTopOffsetRenderType` is `transform` (the default). The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows. No additional Row Detail option is required. ```ts const gridOptions: GridOption = { enableRowDetailView: true, rowTopOffsetRenderType: 'transform', rowDetailView: { - renderMode: 'overlay', // ... other Row Detail options } }; ``` -`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. It will be removed in the next major release. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly. +`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. Explicitly selecting it makes SlickGrid use `rowTopOffsetRenderType: 'top'` for compatibility. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly. -**v11 transition:** `renderMode: 'overlay'` is the permanent rendering approach, but the option is currently a v10 opt-in. In v11, overlay rendering is planned to become the default and only Row Detail renderer, so `renderMode: 'overlay'` will no longer be necessary and the option may be removed. Keep the option while using v10 and remove it when upgrading to v11 if it is removed from the API. +**v11 transition:** Overlay rendering is the permanent rendering approach. In v11, it is planned to become the only Row Detail renderer, so `renderMode` may be removed from the API. ### Keeping Row Detail Components Alive During Scrolling @@ -125,7 +124,6 @@ export class GridRowDetailComponent implements OnInit, OnDestroy { }, externalResources: [AngularRowDetailView], // for v10 and above rowDetailView: { - renderMode: 'overlay', // We can load the "process" asynchronously in 2 different ways (httpClient OR even Promise) process: (item) => this.http.get(`api/item/${item.id}`), diff --git a/frameworks/angular-slickgrid/src/demos/examples/example19.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example19.component.ts index 1c9a6d8e1..7eee3b751 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example19.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example19.component.ts @@ -144,7 +144,6 @@ export class Example19Component implements OnDestroy, OnInit { datasetIdPropertyName: 'rowId', // optionally use a different "id" externalResources: [AngularRowDetailView], rowDetailView: { - renderMode: 'overlay', // optionally change the column index position of the icon (defaults to 0) // columnIndexPosition: 1, diff --git a/frameworks/angular-slickgrid/src/demos/examples/example45.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example45.component.ts index 621aa2e91..6f41e43ad 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example45.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example45.component.ts @@ -115,7 +115,6 @@ export class Example45Component implements OnDestroy, OnInit { rowHeight: 33, externalResources: [AngularRowDetailView], rowDetailView: { - renderMode: 'overlay', process: (item: any) => this.simulateServerAsyncCall(item), loadOnce: false, // you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events useRowClick: false, diff --git a/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-detail.md b/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-detail.md index 9be6488dc..f26556884 100644 --- a/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-detail.md +++ b/frameworks/aurelia-slickgrid/docs/grid-functionalities/row-detail.md @@ -25,22 +25,21 @@ A Row Detail allows you to open a detail panel which can contain extra and/or mo ### Transform-compatible rendering -Row Detail panels use the `overlay` render mode in the examples. The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows when `rowTopOffsetRenderType` is `transform`. +Row Detail automatically uses the `overlay` render mode when `rowTopOffsetRenderType` is `transform` (the default). The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows. No additional Row Detail option is required. ```ts const gridOptions: GridOption = { enableRowDetailView: true, rowTopOffsetRenderType: 'transform', rowDetailView: { - renderMode: 'overlay', // ... other Row Detail options } }; ``` -`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. It will be removed in the next major release. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly. +`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. Explicitly selecting it makes SlickGrid use `rowTopOffsetRenderType: 'top'` for compatibility. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly. -**v11 transition:** `renderMode: 'overlay'` is the permanent rendering approach, but the option is currently a v10 opt-in. In v11, overlay rendering is planned to become the default and only Row Detail renderer, so `renderMode: 'overlay'` will no longer be necessary and the option may be removed. Keep the option while using v10 and remove it when upgrading to v11 if it is removed from the API. +**v11 transition:** Overlay rendering is the permanent rendering approach. In v11, it is planned to become the only Row Detail renderer, so `renderMode` may be removed from the API. ### Keeping Row Detail Components Alive During Scrolling @@ -123,7 +122,6 @@ export class GridExample { }, externalResources: [AureliaRowDetailView], // for v10 and above rowDetailView: { - renderMode: 'overlay', // We can load the "process" asynchronously in 3 different ways (aurelia-http-client, aurelia-fetch-client OR even Promise) process: (item) => this.http.get(`api/item/${item.id}`), diff --git a/frameworks/slickgrid-react/docs/grid-functionalities/row-detail.md b/frameworks/slickgrid-react/docs/grid-functionalities/row-detail.md index 453e3080a..90561e4c2 100644 --- a/frameworks/slickgrid-react/docs/grid-functionalities/row-detail.md +++ b/frameworks/slickgrid-react/docs/grid-functionalities/row-detail.md @@ -25,22 +25,21 @@ A Row Detail allows you to open a detail panel which can contain extra and/or mo ### Transform-compatible rendering -Row Detail panels use the `overlay` render mode in the examples. The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows when `rowTopOffsetRenderType` is `transform`. +Row Detail automatically uses the `overlay` render mode when `rowTopOffsetRenderType` is `transform` (the default). The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows. No additional Row Detail option is required. ```ts const gridOptions: GridOption = { enableRowDetailView: true, rowTopOffsetRenderType: 'transform', rowDetailView: { - renderMode: 'overlay', // ... other Row Detail options } }; ``` -`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. It will be removed in the next major release. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly. +`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. Explicitly selecting it makes SlickGrid use `rowTopOffsetRenderType: 'top'` for compatibility. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly. -**v11 transition:** `renderMode: 'overlay'` is the permanent rendering approach, but the option is currently a v10 opt-in. In v11, overlay rendering is planned to become the default and only Row Detail renderer, so `renderMode: 'overlay'` will no longer be necessary and the option may be removed. Keep the option while using v10 and remove it when upgrading to v11 if it is removed from the API. +**v11 transition:** Overlay rendering is the permanent rendering approach. In v11, it is planned to become the only Row Detail renderer, so `renderMode` may be removed from the API. ### Keeping Row Detail Components Alive During Scrolling @@ -127,7 +126,6 @@ const Example: React.FC = () => { return [{ name: 'rowDetailView', instance: rowDetail }]; }, rowDetailView: { - renderMode: 'overlay', // We can load the "process" asynchronously via Fetch, Promise, ... process: (item) => http.get(`api/item/${item.id}`), diff --git a/frameworks/slickgrid-vue/docs/grid-functionalities/row-detail.md b/frameworks/slickgrid-vue/docs/grid-functionalities/row-detail.md index 6d7ade774..433c7b25d 100644 --- a/frameworks/slickgrid-vue/docs/grid-functionalities/row-detail.md +++ b/frameworks/slickgrid-vue/docs/grid-functionalities/row-detail.md @@ -25,22 +25,21 @@ A Row Detail allows you to open a detail panel which can contain extra and/or mo ### Transform-compatible rendering -Row Detail panels use the `overlay` render mode in the examples. The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows when `rowTopOffsetRenderType` is `transform`. +Row Detail automatically uses the `overlay` render mode when `rowTopOffsetRenderType` is `transform` (the default). The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows. No additional Row Detail option is required. ```ts const gridOptions: GridOption = { enableRowDetailView: true, rowTopOffsetRenderType: 'transform', rowDetailView: { - renderMode: 'overlay', // ... other Row Detail options } }; ``` -`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. It will be removed in the next major release. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly. +`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. Explicitly selecting it makes SlickGrid use `rowTopOffsetRenderType: 'top'` for compatibility. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly. -**v11 transition:** `renderMode: 'overlay'` is the permanent rendering approach, but the option is currently a v10 opt-in. In v11, overlay rendering is planned to become the default and only Row Detail renderer, so `renderMode: 'overlay'` will no longer be necessary and the option may be removed. Keep the option while using v10 and remove it when upgrading to v11 if it is removed from the API. +**v11 transition:** Overlay rendering is the permanent rendering approach. In v11, it is planned to become the only Row Detail renderer, so `renderMode` may be removed from the API. ### Keeping Row Detail Components Alive During Scrolling @@ -108,7 +107,6 @@ function defineGrid() { }, externalResources: [VueRowDetailView], // for v10 and above rowDetailView: { - renderMode: 'overlay', // We can load the "process" asynchronously via Fetch, Promise, ... process: (item) => http.get(`api/item/${item.id}`), diff --git a/package.json b/package.json index 62c7e9b97..1ff4e36ba 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "fallow": "pnpx fallow", "fallow:dead-code": "pnpx fallow dead-code --production", "fallow:dupes": "pnpx fallow dupes", - "fallow:health": "pnpx fallow health --coverage test/vitest-coverage", + "fallow:health": "pnpx fallow health --coverage ./test/vitest-coverage/coverage-final.json", "fallow:fix:check": "pnpx fallow fix --dry-run --production", "fallow:fix": "pnpx fallow fix --production", "lint": "oxlint .", diff --git a/packages/common/src/core/__tests__/slickGrid.spec.ts b/packages/common/src/core/__tests__/slickGrid.spec.ts index 0636f950a..45aa7db22 100644 --- a/packages/common/src/core/__tests__/slickGrid.spec.ts +++ b/packages/common/src/core/__tests__/slickGrid.spec.ts @@ -217,7 +217,7 @@ describe('SlickGrid core file', () => { expect(styleElm?.getAttribute('nonce')).toBe('test-nonce'); }); - it('should auto-fallback to top when Row Detail is enabled with `rowTopOffsetRenderType` set to "transform"', () => { + it('should preserve transform row positioning when Row Detail uses the automatic overlay render mode', () => { document.body.style.zoom = '90%'; const columns = [{ id: 'firstName', field: 'firstName', name: 'First Name' }] as Column[]; grid = new SlickGrid( @@ -230,7 +230,7 @@ describe('SlickGrid core file', () => { grid.init(); expect(grid).toBeTruthy(); - expect(grid.getOptions().rowTopOffsetRenderType).toBe('top'); + expect(grid.getOptions().rowTopOffsetRenderType).toBe('transform'); }); it('should preserve transform row positioning when Row Detail uses the overlay render mode', () => { @@ -252,6 +252,25 @@ describe('SlickGrid core file', () => { expect(grid.getOptions().rowTopOffsetRenderType).toBe('transform'); }); + it('should auto-fallback to top when Row Detail explicitly uses the inline render mode', () => { + const columns = [{ id: 'firstName', field: 'firstName', name: 'First Name' }] as Column[]; + grid = new SlickGrid( + '#myGrid', + [], + columns, + { + ...defaultOptions, + rowTopOffsetRenderType: 'transform', + enableRowDetailView: true, + rowDetailView: { renderMode: 'inline' }, + } as GridOption, + pubSubServiceStub + ); + grid.init(); + + expect(grid.getOptions().rowTopOffsetRenderType).toBe('top'); + }); + it('should keep RowSpan host rows top-positioned while other rows use transforms', () => { const columns = [ { id: 'firstName', field: 'firstName', name: 'First Name' }, diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts index 73af2b6e4..278ea8ec3 100755 --- a/packages/common/src/core/slickGrid.ts +++ b/packages/common/src/core/slickGrid.ts @@ -3838,11 +3838,11 @@ export class SlickGrid = Column, O e // @deprecated v11: remove this Row Detail fallback when inline rendering is removed. // The legacy inline Row Detail renderer relies on absolute top-based row positioning; - // overlay rendering is compatible with transform-based row positioning. + // an omitted renderMode automatically uses overlay rendering with transform-based row positioning. if ( this._options.rowTopOffsetRenderType === 'transform' && this._options.enableRowDetailView && - this._options.rowDetailView?.renderMode !== 'overlay' + this._options.rowDetailView?.renderMode === 'inline' ) { this._options.rowTopOffsetRenderType = 'top'; } diff --git a/packages/common/src/interfaces/rowDetailViewOption.interface.ts b/packages/common/src/interfaces/rowDetailViewOption.interface.ts index 23fd661f8..48a183866 100644 --- a/packages/common/src/interfaces/rowDetailViewOption.interface.ts +++ b/packages/common/src/interfaces/rowDetailViewOption.interface.ts @@ -68,11 +68,12 @@ export interface RowDetailViewOption { maxRows?: number; /** - * Where the Row Detail panel is rendered in the grid DOM. + * Temporary transition option for choosing where the Row Detail panel is rendered in the grid DOM. * Overlay mode renders panels in a sibling layer of the grid canvas and is compatible with `rowTopOffsetRenderType: 'transform'`. + * When omitted, overlay mode is automatically used with `rowTopOffsetRenderType: 'transform'`; otherwise inline mode is used. * Inline mode is retained for backwards compatibility and will be removed in the next major release. - * v11 plan: overlay rendering is intended to become the default and only renderer, so this transition option may be removed. Keep it while using v10 and remove it when upgrading to v11 if it is removed from the API. - * @default 'inline' + * Overlay rendering will become the default and only renderer in the next major release (v11), so this option may be removed. Keep it while using the current major and remove it when upgrading if it is removed from the API. + * @default 'overlay' with transform row positioning; otherwise 'inline' */ renderMode?: RowDetailViewRenderMode; diff --git a/packages/row-detail-view-plugin/src/slickRowDetailView.spec.ts b/packages/row-detail-view-plugin/src/slickRowDetailView.spec.ts index c4fbd6920..5d93df326 100644 --- a/packages/row-detail-view-plugin/src/slickRowDetailView.spec.ts +++ b/packages/row-detail-view-plugin/src/slickRowDetailView.spec.ts @@ -1662,6 +1662,43 @@ describe('SlickRowDetailView plugin', () => { expect(renderOverlaySpy).toHaveBeenCalled(); }); + it('should automatically use the overlay layer with transform row positioning', () => { + const mockItem = { + id: 123, + __collapsed: false, + __isPadding: false, + __sizePadding: 2, + __detailContent: '
Loading...
', + }; + const viewport = document.createElement('div'); + const canvas = document.createElement('div'); + canvas.className = 'grid-canvas'; + viewport.appendChild(canvas); + vi.spyOn(gridStub, 'getOptions').mockReturnValue({ + ...gridOptionsMock, + rowTopOffsetRenderType: 'transform', + rowDetailView: { panelRows: 2, columnId: '_detail_selector' } as any, + }); + vi.spyOn(gridStub, 'getColumnIndex').mockReturnValue(0); + vi.spyOn(gridStub, 'getViewportNode').mockReturnValue(viewport); + vi.spyOn(gridStub, 'getRowCache').mockReturnValue({ 0: { rowNode: [document.createElement('div')] } } as any); + vi.spyOn(gridStub, 'getRowTop').mockReturnValue(100); + vi.spyOn(gridStub, 'getFrozenRowOffset').mockReturnValue(0); + vi.spyOn(gridStub, 'getRowHeight').mockReturnValue(25); + vi.spyOn(dataviewStub, 'getItemById').mockReturnValue(mockItem); + vi.spyOn(dataviewStub, 'getRowById').mockReturnValue(0); + + plugin.init(gridStub); + (plugin as any)._expandedRowIds.add(mockItem.id); + (plugin as any)._renderedViewportRowIds.add(mockItem.id); + (plugin as any).renderOverlayPanels(); + + expect(canvas.querySelector('.slick-row-detail-overlay .dynamic-cell-detail')).toBeTruthy(); + expect( + (plugin.getColumnDefinition().formatter!(0, 1, '', mockColumns[0], mockItem, gridStub) as FormatterResultWithHtml).insertElementAfterTarget + ).toBeUndefined(); + }); + it('should cover overlay panel viewport and reattachment branches', () => { const mockItem = { id: 123, diff --git a/packages/row-detail-view-plugin/src/slickRowDetailView.ts b/packages/row-detail-view-plugin/src/slickRowDetailView.ts index 227c15a32..a4761211f 100644 --- a/packages/row-detail-view-plugin/src/slickRowDetailView.ts +++ b/packages/row-detail-view-plugin/src/slickRowDetailView.ts @@ -131,11 +131,14 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV } /** - * True when Row Detail panels should be rendered outside transformed row elements. + * True when Row Detail panels should be rendered in a sibling overlay layer. * @deprecated v11: remove this compatibility switch when overlay becomes the only renderer. */ protected get isOverlayRenderMode(): boolean { - return this._addonOptions?.renderMode === 'overlay'; + return ( + this._addonOptions?.renderMode === 'overlay' || + (this._addonOptions?.renderMode === undefined && this.gridOptions.rowTopOffsetRenderType === 'transform') + ); } set rowIdsOutOfViewport(rowIds: Array) {