From bc18a8c8b22ff6ba321b3ddcd80986343e35f618 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 20 Mar 2025 13:37:37 +0200 Subject: [PATCH 1/4] feat(GridBase): Apply spec for server-side rendering for relative grid sizes. --- .../src/lib/grids/grid-base.directive.ts | 18 ++++++++++++++++-- .../src/lib/grids/grid/grid.component.html | 4 ++-- .../hierarchical-grid.component.html | 4 ++-- .../grids/pivot-grid/pivot-grid.component.html | 4 ++-- .../grids/pivot-grid/pivot-grid.component.ts | 3 +++ .../grids/tree-grid/tree-grid.component.html | 4 ++-- 6 files changed, 27 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 0b346c079b5..8e161fbfa4e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3361,12 +3361,25 @@ export abstract class IgxGridBaseDirective implements GridType, private get hasZeroResultFilter(): boolean { return this.filteredData && this.filteredData.length === 0; } + protected get totalCalcWidth() { + return this.platform.isBrowser ? this.calcWidth : undefined; + } + + protected get renderData(){ + return this.platform.isBrowser ? this.data : undefined; + } + + @HostBinding('style.display') + protected displayStyle = 'grid'; + + @HostBinding('style.grid-template-rows') + protected templateRows = 'auto auto auto 1fr auto auto'; /** * @hidden @internal */ private get hasNoData(): boolean { - return !this.data || this.dataLength === 0; + return !this.data || this.dataLength === 0 || !this.platform.isBrowser; } /** @@ -5158,7 +5171,8 @@ export abstract class IgxGridBaseDirective implements GridType, /** @hidden @internal */ public get totalHeight() { - return this.calcHeight ? this.calcHeight + this.pinnedRowHeight : this.calcHeight; + const height = this.calcHeight ? this.calcHeight + this.pinnedRowHeight : this.calcHeight; + return this.platform.isBrowser ? height : undefined; } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 900ac1c9572..7026badb60e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -34,7 +34,7 @@
+ [style.height.px]="totalHeight" [style.width.px]="totalCalcWidth" [style.width]="'100%'" #tbody [attr.aria-activedescendant]="activeDescendant"> @if (moving && columnInDrag && pinnedColumns.length <= 0) { - + [style.height.px]="totalHeight" [style.width.px]="totalCalcWidth" [style.width]="'100%'" #tbody (scroll)="preventContainerScroll($event)"> @if (moving && columnInDrag && pinnedColumns.length <= 0) { - + [style.height.px]="totalHeight" [style.width.px]="pivotContentCalcWidth || null" [style.width]="'100%'" #tbody [attr.aria-activedescendant]="activeDescendant"> @if (hasMovableColumns && columnInDrag && pinnedColumns.length <= 0) { @@ -31,7 +31,7 @@ } - + [style.height.px]='totalHeight' [style.width.px]="totalCalcWidth" [style.width]="'100%'" #tbody (scroll)='preventContainerScroll($event)'> @if (moving && columnInDrag && pinnedColumns.length <= 0) { - Date: Thu, 20 Mar 2025 15:16:05 +0200 Subject: [PATCH 2/4] chore(*): Apply width=100% only for ssr. --- .../igniteui-angular/src/lib/grids/grid/grid.component.html | 2 +- .../grids/hierarchical-grid/hierarchical-grid.component.html | 2 +- .../src/lib/grids/pivot-grid/pivot-grid.component.html | 2 +- .../src/lib/grids/tree-grid/tree-grid.component.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 7026badb60e..e5db8db8d69 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -34,7 +34,7 @@
+ [style.height.px]="totalHeight" [style.width.px]="totalCalcWidth" [style.width]="!platform.isBrowser ? '100%' : undefined" #tbody [attr.aria-activedescendant]="activeDescendant"> @if (moving && columnInDrag && pinnedColumns.length <= 0) { + [style.height.px]="totalHeight" [style.width.px]="totalCalcWidth" [style.width]="!platform.isBrowser ? '100%' : undefined" #tbody (scroll)="preventContainerScroll($event)"> @if (moving && columnInDrag && pinnedColumns.length <= 0) { + [style.height.px]="totalHeight" [style.width.px]="pivotContentCalcWidth || null" [style.width]="!platform.isBrowser ? '100%' : undefined" #tbody [attr.aria-activedescendant]="activeDescendant"> @if (hasMovableColumns && columnInDrag && pinnedColumns.length <= 0) { diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index c173f6e7389..6b537a1e53e 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -19,7 +19,7 @@
+ [style.height.px]='totalHeight' [style.width.px]="totalCalcWidth" [style.width]="!platform.isBrowser ? '100%' : undefined" #tbody (scroll)='preventContainerScroll($event)'> @if (moving && columnInDrag && pinnedColumns.length <= 0) { Date: Tue, 1 Apr 2025 15:03:34 +0300 Subject: [PATCH 3/4] chore(*): Adjust check so that data is omitted only for % size in ssr. --- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index ae12545a0cd..87fc0688d9b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3367,8 +3367,9 @@ export abstract class IgxGridBaseDirective implements GridType, return this.platform.isBrowser ? this.calcWidth : undefined; } - protected get renderData(){ - return this.platform.isBrowser ? this.data : undefined; + protected get renderData() { + // omit data if not in the browser and size is % + return !this.platform.isBrowser && this.isPercentHeight ? undefined : this.data; } @HostBinding('style.display') From 988d5b54c9b26c32e12993470f12ab0a51fe27fd Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 8 Apr 2025 17:29:17 +0300 Subject: [PATCH 4/4] chore(*): Add note in changelog. --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f8909da591..f1cd562f37e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ All notable changes for each version of this project will be documented in this - **Deprecation** - `tabIndex` has been deprecated and will be removed in a future version. - `IgxGrid`, `IgxHierarchicalGrid`, `IgxTreeGrid` - A column's `minWidth` and `maxWidth` constrain the user-specified `width` so that it cannot go outside their bounds. + - In SSR mode grid with height 100% or with no height will render on the server with % size and with no data. The grid will show either the empty grid template or the loading indicator (if isLoading is true). + - In SSR mode grid with width 100% or with no width will render on the server with % size and with all columns. ## 19.1.1 ### New Features