Merge branch 'master' into sstoychev/touch-scroll-time-picker

Author: ChronosSF

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

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3364,12 +3364,26 @@ 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() {
+        // omit data if not in the browser and size is %
+        return !this.platform.isBrowser && this.isPercentHeight ? undefined : this.data;
+    }
+
+    @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;
     }
 
     /**
@@ -5169,7 +5183,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;
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -34,7 +34,7 @@
     <div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
         (dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
         (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
-        [style.height.px]="totalHeight" [style.width.px]="calcWidth || null" #tbody [attr.aria-activedescendant]="activeDescendant">
+        [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) {
             <span
                 [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
@@ -70,7 +70,7 @@
                 }
             }
         </ng-template>
-        <ng-template igxGridFor let-rowData [igxGridForOf]="data
+        <ng-template igxGridFor let-rowData [igxGridForOf]="renderData
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -20,7 +20,7 @@
     <div class="igx-grid__tbody-content"  tabindex="0" (focus)="navigation.focusTbody($event)"
         (keydown)="navigation.handleNavigation($event)" (dragStop)="selectionService.dragMode = $event"
         (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [attr.aria-activedescendant]="activeDescendant" [attr.role]="dataView.length ? null : 'row'"
-        [style.height.px]="totalHeight" [style.width.px]="calcWidth" #tbody (scroll)="preventContainerScroll($event)">
+        [style.height.px]="totalHeight" [style.width.px]="totalCalcWidth" [style.width]="!platform.isBrowser ? '100%' : undefined" #tbody (scroll)="preventContainerScroll($event)">
         @if (moving && columnInDrag && pinnedColumns.length <= 0) {
             <span
                 [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
@@ -54,7 +54,7 @@
         </ng-template>
         <ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
         </ng-container>
-        <ng-template igxGridFor let-rowData let-rowIndex="index" [igxGridForOf]="data
+        <ng-template igxGridFor let-rowData let-rowIndex="index" [igxGridForOf]="renderData
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html

@@ -22,7 +22,7 @@
     <div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
         (dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
         (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
-        [style.height.px]="totalHeight" [style.width.px]="pivotContentCalcWidth || null" #tbody [attr.aria-activedescendant]="activeDescendant">
+        [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) {
             <span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-left"></span>
@@ -31,7 +31,7 @@
             <span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
         }
-        <ng-template igxGridFor let-rowData [igxGridForOf]="data
+        <ng-template igxGridFor let-rowData [igxGridForOf]="renderData
         | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger
         | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger
         | pivotGridRow:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -1290,6 +1290,9 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     /** @hidden @internal */
     public get pivotContentCalcWidth() {
+        if (!this.platform.isBrowser) {
+            return undefined;
+        }
         if (!this.visibleRowDimensions.length) {
             return Math.max(0, this.calcWidth - this.pivotRowWidths);
         }

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -19,7 +19,7 @@
     <div class="igx-grid__tbody-content"  tabindex="0" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)"
     (dragStop)="selectionService.dragMode = $event" [attr.aria-activedescendant]="activeDescendant" [attr.role]="dataView.length ? null : 'row'"
         (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
-        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>
+        [style.height.px]='totalHeight' [style.width.px]="totalCalcWidth" [style.width]="!platform.isBrowser ? '100%' : undefined" #tbody (scroll)='preventContainerScroll($event)'>
         @if (moving && columnInDrag && pinnedColumns.length <= 0) {
             <span
                 [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
@@ -56,7 +56,7 @@
             }
         </ng-template>
         <ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null"></ng-container>
-        <ng-template igxGridFor let-rowData [igxGridForOf]="data
+        <ng-template igxGridFor let-rowData [igxGridForOf]="renderData
         | treeGridTransaction:pipeTrigger
         | visibleColumns:hasVisibleColumns
         | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger

projects/igniteui-angular/src/lib/icon/icons.indigo.ts

@@ -238,7 +238,7 @@ const refresh: IMXIcon = {
 
 const search: IMXIcon = {
     name: 'search',
-    value: `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24"><path d="M10.393 3a7.393 7.393 0 1 0 4.068 13.567l3.996 3.997a1.49 1.49 0 1 0 2.107-2.107l-3.997-3.996A7.393 7.393 0 0 0 10.393 3ZM6 10.393a4.393 4.393 0 1 1 8.786 0 4.393 4.393 0 0 1-8.786 0Z"></svg>`,
+    value: `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24"><path d="M10.393 3a7.393 7.393 0 1 0 4.068 13.567l3.996 3.997a1.49 1.49 0 1 0 2.107-2.107l-3.997-3.996A7.393 7.393 0 0 0 10.393 3ZM6 10.393a4.393 4.393 0 1 1 8.786 0 4.393 4.393 0 0 1-8.786 0Z"/></svg>`,
     categories: ['editor'],
     fontSet: 'indigo'
 }

src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.ts

@@ -3,15 +3,14 @@ import {
     IGX_HIERARCHICAL_GRID_DIRECTIVES,
     IgxHierarchicalGridComponent
 } from 'igniteui-angular';
-import { RemoteService } from '../shared/remote.service';
 import { HierarchicalRemoteService } from './hierarchical-remote.service';
 import { debounceTime } from 'rxjs/operators';
 
 @Component({
     selector: 'app-hierarchical-grid-remote-virtualization-sample',
     templateUrl: 'hierarchical-grid-remote-virtualization.html',
     styleUrls: ['hierarchical-grid-remote-virtualization.scss'],
-    providers: [RemoteService],
+    providers: [HierarchicalRemoteService],
     imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES]
 })
 export class HierarchicalGridRemoteVirtualizationComponent implements AfterViewInit {