Refactor virtualization resize observer to track individual forOf elements. #16809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

MayaKirova wants to merge 40 commits into master from mkirova/resize-observer-refactor

projects/igniteui-angular-performance/src/app/app.routes.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ import { Routes } from '@angular/router'; @@
     import { GridComponent } from './grid/grid.component';
     import { TreeGridComponent } from './tree-grid/tree-grid.component';
     import { PivotGridComponent } from './pivot-grid/pivot-grid.component';
+    import { HierarchicalGridComponent } from './hierarchical-grid/hierarchical-grid.component';
     export const routes: Routes = [
         {
@@ Expand Down Expand Up / @@ -45,6 +46,12 @@ export const routes: Routes = [ @@
             pathMatch: 'full',
             component: GridComponent,
             data: { rows: 1000 }
-        }
+        },
+        {
+            path: "hierarchical-grid-100k",
+            title: "Hierarchical Grid 100k records",
+            component: HierarchicalGridComponent,
+            data: { rows: 100_000 }
+        },
     ];

...s/igniteui-angular-performance/src/app/hierarchical-grid/hierarchical-grid.component.html

-Original file line number
+Diff line change
@@ -0,0 +1,35 @@
+    <div class="grid-wrapper">
+      <igx-hierarchical-grid
+        [showExpandAll]="true"
+        #grid
+        [data]="data"
+        [allowFiltering]="false"
+        [height]="'100%'"
+        [width]="'100%'"
+      >
+        @for (col of columns; track col) {
+          <igx-column
+            [field]="col.field"
+            [header]="col.header"
+            [sortable]="col.sortable"
+            [dataType]="col.dataType"
+            [width]="col.width"
+            [groupable]="col.groupable"
+          >
+          </igx-column>
+        }
+        <igx-row-island [height]="null" [width]="null" [key]="'childData'" [autoGenerate]="false">
+            @for (col of columns; track col) {
+                <igx-column
+                  [field]="col.field"
+                  [header]="col.header"
+                  [sortable]="col.sortable"
+                  [dataType]="col.dataType"
+                  [width]="col.width"
+                  [groupable]="col.groupable"
+                >
+                </igx-column>
+            }
+        </igx-row-island>
+    </igx-hierarchical-grid>
+    </div>

...s/igniteui-angular-performance/src/app/hierarchical-grid/hierarchical-grid.component.scss

-Original file line number
+Diff line change
@@ -0,0 +1,10 @@
+    :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+    .grid-wrapper {
+        height: 100%;
+        width: 100%;
+    }

...cts/igniteui-angular-performance/src/app/hierarchical-grid/hierarchical-grid.component.ts

-Original file line number
+Diff line change
@@ -0,0 +1,39 @@
+    import { Component, inject, ViewChild } from '@angular/core';
+    import { GridColumnDataType, IgxColumnComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent } from "igniteui-angular"
+    import { DataService } from '../services/data.service';
+    import { ActivatedRoute } from '@angular/router';
+    @Component({
+        selector: 'app-hierarchical-grid',
+        imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent],
+        templateUrl: './hierarchical-grid.component.html',
+        styleUrl: './hierarchical-grid.component.scss'
+    })
+    export class HierarchicalGridComponent {
+        protected columns: any[] = []
+        protected data: any[] = [];
+        protected performanceDataList: PerformanceEntryList = [];
+        private dataService = inject(DataService);
+        private activatedRoute = inject(ActivatedRoute);
+        @ViewChild(IgxHierarchicalGridComponent, { static: true })
+        public grid: IgxHierarchicalGridComponent;
+        constructor() {
+            this.data = this.dataService.generateHierarchicalData(this.activatedRoute.snapshot.data.rows)
+            this.columns = [
+                { field: "Id", dataType: GridColumnDataType.Number, sortable: true, width: 'auto', groupable: true },
+                { field: "Name", dataType: GridColumnDataType.String, sortable: true, width: 'auto', groupable: true },
+                { field: "AthleteNumber", dataType: GridColumnDataType.Number, sortable: true, width: 'auto', groupable: true },
+                { field: "Registered", dataType: GridColumnDataType.DateTime, sortable: true, width: 'auto', groupable: true },
+                { field: "CountryName", dataType: GridColumnDataType.String, sortable: true, width: 'auto', groupable: true },
+                { field: "FirstAppearance", dataType: GridColumnDataType.Time, sortable: true, width: 'auto', groupable: true },
+                { field: "CareerStart", dataType: GridColumnDataType.Date, sortable: true, width: 'auto', groupable: true },
+                { field: "Active", dataType: GridColumnDataType.Boolean, sortable: true, width: 'auto', groupable: true },
+                { field: "NetWorth", dataType: GridColumnDataType.Currency, sortable: true, width: 'auto', groupable: true },
+                { field: "CountryFlag", dataType: GridColumnDataType.Image, sortable: true, width: 'auto', groupable: true },
+                { field: "SuccessRate", dataType: GridColumnDataType.Percent, sortable: true, width: 'auto', groupable: true },
+                { field: "Position", dataType: GridColumnDataType.String, sortable: true, width: 'auto', groupable: true },
+            ];
+        }
+    }

projects/igniteui-angular-performance/src/app/services/data.service.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,12 @@ export class DataService { @@
             return data;
         }
+        public generateHierarchicalData(rows: number): any[] {
+            const rnd = new Mulberry32(1234);
+            const data = this.generateAthletesData(rnd, rows, true);
+            return data;
+        }
         public generateTreeData(rows: number): any[] {
             const rnd = new Mulberry32(1234);
             const data = this.generateEmployeesData(rnd, rows);
@@ Expand Down Expand Up / @@ -114,7 +120,7 @@ export class DataService { @@
             return currData;
         }
-        private generateAthletesData(rnd: Mulberry32, rows: number): any[] {
+        private generateAthletesData(rnd: Mulberry32, rows: number, children = false): any[] {
             const currData = [];
             for (let i = 0; i < rows; i++) {
                 const rand = Math.floor(rnd.random() * Math.floor(athletesData.length));
@@ Expand All / @@ -125,6 +131,10 @@ export class DataService { @@
                 dataObj["Active"] = this.randomizeBoolean(rnd);
                 dataObj["SuccessRate"] = this.randomizePercentage(rnd);
                 dataObj["AthleteNumber"] = this.randomizeAthleteNumber(dataObj["AthleteNumber"], rnd);
+                if (children) {
+                    const rnd = new Mulberry32(i);
+                    dataObj["childData"] = this.generateAthletesData(rnd, 5);
+                }
                 currData.push(dataObj);
             }
             return currData;
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor virtualization resize observer to track individual forOf elements. #16809

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Refactor virtualization resize observer to track individual forOf elements. #16809

Are you sure you want to change the base?

Uh oh!

Refactor virtualization resize observer to track individual forOf elements. #16809

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!