diff --git a/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.ts b/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.ts
index 5f2c4d1ce..7661a9509 100644
--- a/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.ts
+++ b/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.ts
@@ -1,4 +1,4 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
import { IgcGridLite } from 'igniteui-grid-lite';
@@ -16,12 +16,9 @@ defineComponents(IgcButtonComponent);
})
export class GridLiteDataBindingDynamicComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
- @ViewChild('gridLite', { static: false }) gridLite!: ElementRef;
-
+
public data: (ProductInfo | UserSimple)[] = [];
public dataType: 'products' | 'users' = 'products';
- public autoGenerate = true;
ngOnInit() {
this.data = this.dataService.generateProducts(50);
@@ -29,16 +26,10 @@ export class GridLiteDataBindingDynamicComponent implements OnInit {
switchData() {
this.dataType = this.dataType === 'products' ? 'users' : 'products';
- const grid = this.gridLite?.nativeElement as any;
-
- if (grid) {
- grid.columns = [];
- if (this.dataType === 'products') {
- this.data = this.dataService.generateProducts(50);
- } else {
- this.data = this.dataService.generateSimpleUsers(50);
- }
- grid.data = this.data;
+ if (this.dataType === 'products') {
+ this.data = this.dataService.generateProducts(50);
+ } else {
+ this.data = this.dataService.generateSimpleUsers(50);
}
}
}
diff --git a/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.html b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.html
index e6cdea1be..91886b333 100644
--- a/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.html
+++ b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.html
@@ -1,9 +1,12 @@
-
+
+
+
+
@for (entry of log; track entry) {
diff --git a/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.ts b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.ts
index 811ab5818..a0353d47a 100644
--- a/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.ts
+++ b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.ts
@@ -16,47 +16,22 @@ defineComponents(IgcCheckboxComponent);
})
export class GridLiteFilteringEventsComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: User[] = [];
- public columns: any[] = [];
public log: string[] = [];
ngOnInit() {
this.data = this.dataService.generateUsers(50);
-
- this.columns = [
- {
- key: 'firstName',
- headerText: 'First name',
- filter: true
- },
- {
- key: 'lastName',
- headerText: 'Last name',
- filter: true
- },
- {
- key: 'age',
- headerText: 'Age',
- filter: true,
- type: 'number'
- },
- {
- key: 'active',
- headerText: 'Active',
- type: 'boolean',
- filter: true,
- cellTemplate: (params: any) => {
- const checkbox = document.createElement('igc-checkbox');
- if (params.value) {
- checkbox.setAttribute('checked', '');
- }
- return checkbox;
- }
- }
- ];
}
+ protected checkboxTemplate = (params: any) => {
+ const checkbox = document.createElement('igc-checkbox');
+ if (params.value) {
+ checkbox.setAttribute('checked', '');
+ }
+ return checkbox;
+ };
+
private get timeStamp(): string {
return `[${new Date().toLocaleTimeString()}]`;
}
diff --git a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.html b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.html
index 650a29cac..af557467e 100644
--- a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.html
+++ b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.html
@@ -8,10 +8,13 @@
Generated request
[class.in-operation]="inOperation"
indeterminate>
-
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.ts b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.ts
index 16dc1ebdc..5e0c1a949 100644
--- a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.ts
+++ b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.ts
@@ -16,47 +16,14 @@ defineComponents(IgcCheckboxComponent, IgcCircularProgressComponent);
})
export class GridLiteFilteringPipelineComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: User[] = [];
- public columns: any[] = [];
public dataPipelineConfiguration: any;
public inOperation = false;
public queryString = '';
ngOnInit() {
this.data = this.dataService.generateUsers(50);
-
- this.columns = [
- {
- key: 'firstName',
- headerText: 'First name',
- filter: true
- },
- {
- key: 'lastName',
- headerText: 'Last name',
- filter: true
- },
- {
- key: 'age',
- headerText: 'Age',
- filter: true,
- type: 'number'
- },
- {
- key: 'active',
- headerText: 'Active',
- type: 'boolean',
- filter: true,
- cellTemplate: (params: any) => {
- const checkbox = document.createElement('igc-checkbox');
- if (params.value) {
- checkbox.setAttribute('checked', '');
- }
- return checkbox;
- }
- }
- ];
this.dataPipelineConfiguration = {
filter: async ({ data, grid }: any) => {
@@ -69,14 +36,22 @@ export class GridLiteFilteringPipelineComponent implements OnInit {
};
}
+ protected checkboxTemplate = (params: any) => {
+ const checkbox = document.createElement('igc-checkbox');
+ if (params.value) {
+ checkbox.setAttribute('checked', '');
+ }
+ return checkbox;
+ };
+
private buildUri(state: any[]) {
const grouped = this.groupBy(state, 'key');
const out: string[] = [];
-
+
for (const [key, exprs] of Object.entries(grouped)) {
out.push(`${key}(${this.mapExpressions(exprs as any[])})`);
}
-
+
this.queryString = `GET: /data?filter=${out.join('&')}`;
}
diff --git a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.html b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.html
index 9b6326efb..1f2324f57 100644
--- a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.html
+++ b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.html
@@ -1,6 +1,8 @@
-
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.ts b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.ts
index 8c6e2360e..cd2525fbe 100644
--- a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.ts
+++ b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.ts
@@ -16,43 +16,18 @@ defineComponents(IgcCheckboxComponent);
})
export class GridLiteFilteringSimpleComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: User[] = [];
- public columns: any[] = [];
ngOnInit() {
this.data = this.dataService.generateUsers(50);
-
- this.columns = [
- {
- key: 'firstName',
- headerText: 'First name',
- filter: true
- },
- {
- key: 'lastName',
- headerText: 'Last name',
- filter: true
- },
- {
- key: 'age',
- headerText: 'Age',
- filter: true,
- type: 'number'
- },
- {
- key: 'active',
- headerText: 'Active',
- type: 'boolean',
- filter: true,
- cellTemplate: (params: any) => {
- const checkbox = document.createElement('igc-checkbox');
- if (params.value) {
- checkbox.setAttribute('checked', '');
- }
- return checkbox;
- }
- }
- ];
}
+
+ protected checkboxTemplate = (params: any) => {
+ const checkbox = document.createElement('igc-checkbox');
+ if (params.value) {
+ checkbox.setAttribute('checked', '');
+ }
+ return checkbox;
+ };
}
diff --git a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html
index 9b6326efb..c9f8ac300 100644
--- a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html
+++ b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html
@@ -1,6 +1,12 @@
-
+
+
+
+
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts
index feb189906..64536a4a0 100644
--- a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts
+++ b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts
@@ -1,6 +1,6 @@
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
-import {
+import {
defineComponents,
IgcRatingComponent,
IgcCheckboxComponent,
@@ -28,103 +28,58 @@ defineComponents(
})
export class GridLiteOverviewComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: User[] = [];
- public columns: any[] = [];
private choices = ['Low', 'Standard', 'High'];
ngOnInit() {
this.data = this.dataService.generateUsers(1000);
-
- this.columns = [
- {
- key: 'avatar',
- headerText: 'Avatar',
- cellTemplate: (params: any) => {
- const cell = document.createElement('igc-avatar');
- cell.setAttribute('shape', 'circle');
- cell.setAttribute('alt', 'User avatar');
- cell.setAttribute('src', params.value);
- return cell;
- }
- },
- {
- key: 'firstName',
- headerText: 'First name',
- sort: true,
- filter: true,
- resizable: true
- },
- {
- key: 'lastName',
- headerText: 'Last name',
- sort: true,
- filter: true,
- resizable: true
- },
- {
- key: 'email',
- headerText: 'Email Address'
- },
- {
- key: 'priority',
- headerText: 'Priority',
- width: '12rem',
- sort: {
- comparer: (a: string, b: string) => this.choices.indexOf(a) - this.choices.indexOf(b),
- caseSensitive: true
- },
- cellTemplate: (params: any) => {
- const select = document.createElement('igc-select');
- select.setAttribute('outlined', '');
- select.setAttribute('flip', '');
- select.setAttribute('value', params.value);
-
- this.choices.forEach(choice => {
- const item = document.createElement('igc-select-item');
- item.setAttribute('value', choice);
- item.textContent = choice;
- select.appendChild(item);
- });
-
- return select;
- }
- },
- {
- key: 'satisfaction',
- headerText: 'Satisfaction rating',
- type: 'number',
- sort: true,
- filter: true,
- cellTemplate: (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('value', params.value.toString());
- return rating;
- }
- },
- {
- key: 'registeredAt',
- headerText: 'Registered @',
- sort: true,
- cellTemplate: (params: any) => {
- const span = document.createElement('span');
- span.textContent = params.value.toLocaleString();
- return span;
- }
- },
- {
- key: 'active',
- type: 'boolean',
- headerText: 'Active',
- cellTemplate: (params: any) => {
- const checkbox = document.createElement('igc-checkbox');
- if (params.value) {
- checkbox.setAttribute('checked', '');
- }
- return checkbox;
- }
- }
- ];
}
+
+ protected avatarTemplate = (params: any) => {
+ const cell = document.createElement('igc-avatar');
+ cell.setAttribute('shape', 'circle');
+ cell.setAttribute('alt', 'User avatar');
+ cell.setAttribute('src', params.value);
+ return cell;
+ };
+
+ protected priorityTemplate = (params: any) => {
+ const select = document.createElement('igc-select');
+ select.setAttribute('outlined', '');
+ select.setAttribute('flip', '');
+ select.setAttribute('value', params.value);
+
+ this.choices.forEach(choice => {
+ const item = document.createElement('igc-select-item');
+ item.setAttribute('value', choice);
+ item.textContent = choice;
+ select.appendChild(item);
+ });
+
+ return select;
+ };
+
+ priorityComparer = (a: string, b: string) => this.choices.indexOf(a) - this.choices.indexOf(b);
+
+ protected satisfactionTemplate = (params: any) => {
+ const rating = document.createElement('igc-rating');
+ rating.setAttribute('readonly', '');
+ rating.setAttribute('value', params.value.toString());
+ return rating;
+ };
+
+ protected registeredAtTemplate = (params: any) => {
+ const span = document.createElement('span');
+ span.textContent = params.value.toLocaleString();
+ return span;
+ };
+
+ protected activeTemplate = (params: any) => {
+ const checkbox = document.createElement('igc-checkbox');
+ if (params.value) {
+ checkbox.setAttribute('checked', '');
+ }
+ return checkbox;
+ };
}
diff --git a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.html b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.html
index 5370c694c..d9bbc866b 100644
--- a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.html
+++ b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.html
@@ -1,9 +1,13 @@
-
+
+
+
+
+
@for (entry of log; track entry) {
diff --git a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.ts b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.ts
index a41750c92..ef05bdaba 100644
--- a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.ts
+++ b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.ts
@@ -16,54 +16,22 @@ defineComponents(IgcRatingComponent);
})
export class GridLiteSortingEventsComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: ProductInfo[] = [];
- public columns: any[] = [];
public log: string[] = [];
ngOnInit() {
this.data = this.dataService.generateProducts(100);
-
- this.columns = [
- {
- key: 'name',
- headerText: 'Name',
- sort: true
- },
- {
- key: 'price',
- type: 'number',
- headerText: 'Price',
- sort: true
- },
- {
- key: 'rating',
- type: 'number',
- headerText: 'Rating',
- sort: true,
- cellTemplate: (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('step', '0.01');
- rating.setAttribute('value', params.value.toString());
- return rating;
- }
- },
- {
- key: 'sold',
- type: 'number',
- headerText: 'Sold',
- sort: true
- },
- {
- key: 'total',
- type: 'number',
- headerText: 'Total',
- sort: true
- }
- ];
}
+ protected ratingTemplate = (params: any) => {
+ const rating = document.createElement('igc-rating');
+ rating.setAttribute('readonly', '');
+ rating.setAttribute('step', '0.01');
+ rating.setAttribute('value', params.value.toString());
+ return rating;
+ };
+
private get timeStamp(): string {
return `[${new Date().toLocaleTimeString()}]`;
}
@@ -78,7 +46,7 @@ export class GridLiteSortingEventsComponent implements OnInit {
handleSorting(event: any) {
const { detail, type } = event;
const allowedColumns = ['price', 'total', 'sold'];
-
+
if (!allowedColumns.includes(detail.key)) {
event.preventDefault();
this.updateLog(
diff --git a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html
index 9b5314523..f72da9b8c 100644
--- a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html
+++ b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html
@@ -1,20 +1,20 @@
+ [checked]="sortingOptions.mode === 'multiple'"
+ (igcChange)="updateConfig($event.detail.checked)">
Enable multi-sort
-
- Enable tri-state sorting
-
-
-
+ [sortingOptions]="sortingOptions">
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.ts b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.ts
index eeeddaf90..87d389018 100644
--- a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.ts
+++ b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.ts
@@ -1,4 +1,4 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { defineComponents, IgcRatingComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
import { IgcGridLite } from 'igniteui-grid-lite';
@@ -16,58 +16,28 @@ defineComponents(IgcRatingComponent, IgcSwitchComponent);
})
export class GridLiteSortingGridConfigComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
+ @ViewChild('gridLite', { static: true }) gridLite!: ElementRef;
+
public data: ProductInfo[] = [];
- public columns: any[] = [];
- public sortConfiguration: any = {
- multiple: true,
- triState: true
+ public sortingOptions: any = {
+ mode: 'multiple'
};
ngOnInit() {
this.data = this.dataService.generateProducts(100);
-
- this.columns = [
- {
- key: 'name',
- headerText: 'Name',
- sort: true
- },
- {
- key: 'price',
- type: 'number',
- headerText: 'Price',
- sort: true
- },
- {
- key: 'rating',
- type: 'number',
- headerText: 'Rating',
- sort: true,
- cellTemplate: (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('step', '0.01');
- rating.setAttribute('value', params.value.toString());
- return rating;
- }
- },
- {
- key: 'sold',
- type: 'number',
- headerText: 'Sold',
- sort: true
- },
- {
- key: 'total',
- type: 'number',
- headerText: 'Total',
- sort: true
- }
- ];
}
- updateConfig(prop: string, value: boolean) {
- this.sortConfiguration = { ...this.sortConfiguration, [prop]: value };
+ protected ratingTemplate = (params: any) => {
+ const rating = document.createElement('igc-rating');
+ rating.setAttribute('readonly', '');
+ rating.setAttribute('step', '0.01');
+ rating.setAttribute('value', params.value.toString());
+ return rating;
+ };
+
+ protected updateConfig(value: boolean) {
+ this.sortingOptions = { ...this.sortingOptions, mode: value ? 'multiple' : 'single' };
+ this.gridLite.nativeElement.clearSort();
}
}
diff --git a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.html b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.html
index 650a29cac..5a52cc6d8 100644
--- a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.html
+++ b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.html
@@ -8,10 +8,14 @@
Generated request
[class.in-operation]="inOperation"
indeterminate>
-
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.ts b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.ts
index abaeb8c57..7bac31695 100644
--- a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.ts
+++ b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.ts
@@ -16,60 +16,20 @@ defineComponents(IgcRatingComponent, IgcCircularProgressComponent);
})
export class GridLiteSortingPipelineComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: ProductInfo[] = [];
- public columns: any[] = [];
public dataPipelineConfiguration: any;
public inOperation = false;
public queryString = '';
ngOnInit() {
this.data = this.dataService.generateProducts(100);
-
- this.columns = [
- {
- key: 'name',
- headerText: 'Name',
- sort: true
- },
- {
- key: 'price',
- type: 'number',
- headerText: 'Price',
- sort: true
- },
- {
- key: 'rating',
- type: 'number',
- headerText: 'Rating',
- sort: true,
- cellTemplate: (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('step', '0.01');
- rating.setAttribute('value', params.value.toString());
- return rating;
- }
- },
- {
- key: 'sold',
- type: 'number',
- headerText: 'Sold',
- sort: true
- },
- {
- key: 'total',
- type: 'number',
- headerText: 'Total',
- sort: true
- }
- ];
this.dataPipelineConfiguration = {
sort: async ({ data, grid }: any) => {
this.inOperation = true;
- this.queryString = grid.sortExpressions.length
- ? this.buildUri(grid.sortExpressions)
+ this.queryString = grid.sortingExpressions.length
+ ? this.buildUri(grid.sortingExpressions)
: '';
await new Promise(resolve => setTimeout(resolve, 250));
this.inOperation = false;
@@ -78,6 +38,14 @@ export class GridLiteSortingPipelineComponent implements OnInit {
};
}
+ protected ratingTemplate = (params: any) => {
+ const rating = document.createElement('igc-rating');
+ rating.setAttribute('readonly', '');
+ rating.setAttribute('step', '0.01');
+ rating.setAttribute('value', params.value.toString());
+ return rating;
+ };
+
private buildUri(state: any[]): string {
const uri: string[] = [];
for (const expr of state) {
diff --git a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.html b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.html
index 9b6326efb..a012964af 100644
--- a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.html
+++ b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.html
@@ -1,6 +1,9 @@
-
+
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.ts b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.ts
index d3256cb04..949d274b4 100644
--- a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.ts
+++ b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.ts
@@ -16,52 +16,20 @@ defineComponents(IgcRatingComponent);
})
export class GridLiteSortingSimpleComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: ProductInfo[] = [];
- public columns: any[] = [];
ngOnInit() {
this.data = this.dataService.generateProducts(100);
-
- this.columns = [
- {
- key: 'name',
- headerText: 'Name',
- sort: {
- comparer: (a: string, b: string) => a.length - b.length
- }
- },
- {
- key: 'price',
- type: 'number',
- headerText: 'Price',
- sort: true
- },
- {
- key: 'rating',
- type: 'number',
- headerText: 'Rating',
- sort: true,
- cellTemplate: (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('step', '0.01');
- rating.setAttribute('value', params.value.toString());
- return rating;
- }
- },
- {
- key: 'sold',
- type: 'number',
- headerText: 'Sold',
- sort: true
- },
- {
- key: 'total',
- type: 'number',
- headerText: 'Total',
- sort: true
- }
- ];
}
+
+ protected nameComparer = (a: string, b: string) => a.length - b.length;
+
+ protected ratingTemplate = (params: any) => {
+ const rating = document.createElement('igc-rating');
+ rating.setAttribute('readonly', '');
+ rating.setAttribute('step', '0.01');
+ rating.setAttribute('value', params.value.toString());
+ return rating;
+ };
}
diff --git a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html
index f1befbff9..e2cab0cb5 100644
--- a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html
+++ b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html
@@ -11,7 +11,11 @@
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.scss b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.scss
index 60fe9043c..69a79b605 100644
--- a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.scss
+++ b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.scss
@@ -12,7 +12,7 @@
}
.theme-switcher {
- margin-bottom: 2rem;
+ padding: 1rem;
}
igc-grid-lite {
diff --git a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts
index 8c1449c39..ec1f78a68 100644
--- a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts
+++ b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts
@@ -19,48 +19,10 @@ export class GridLiteStylingCustomComponent implements OnInit {
private dataService = inject(GridLiteDataService);
public data: ProductInfo[] = [];
- public columns: any[] = [];
public theme: 'dark' | 'light' = 'dark';
ngOnInit() {
this.data = this.dataService.generateProducts(50);
-
- this.columns = [
- {
- key: 'name',
- headerText: 'Product',
- filter: true,
- sort: true
- },
- {
- key: 'price',
- headerText: 'Price',
- type: 'number',
- filter: true,
- sort: true
- },
- {
- key: 'sold',
- type: 'number',
- headerText: 'Sold',
- filter: true,
- sort: true
- },
- {
- key: 'total',
- headerText: 'Total',
- type: 'number',
- filter: true,
- sort: true
- },
- {
- key: 'rating',
- type: 'number',
- headerText: 'Rating',
- filter: true,
- sort: true
- }
- ];
}
switchTheme() {
diff --git a/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html
index c19f47b31..2f4cfd77d 100644
--- a/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html
+++ b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html
@@ -10,10 +10,14 @@
}
-
-
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts
index 095ef4abd..7e25a50bd 100644
--- a/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts
+++ b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts
@@ -16,9 +16,8 @@ defineComponents(IgcRatingComponent, IgcSelectComponent, IgcSelectItemComponent)
})
export class GridLiteStylingThemesComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: ProductInfo[] = [];
- public columns: any[] = [];
public selectedTheme = 'Bootstrap';
public themes = [
'Bootstrap',
@@ -33,51 +32,15 @@ export class GridLiteStylingThemesComponent implements OnInit {
ngOnInit() {
this.data = this.dataService.generateProducts(50);
-
- this.columns = [
- {
- key: 'name',
- headerText: 'Product',
- sort: true,
- filter: true
- },
- {
- key: 'price',
- headerText: 'Price per item',
- sort: true,
- filter: true,
- type: 'number'
- },
- {
- key: 'sold',
- headerText: 'Items sold',
- sort: true,
- filter: true,
- type: 'number'
- },
- {
- key: 'total',
- headerText: 'Total',
- sort: true,
- filter: true,
- type: 'number'
- },
- {
- key: 'rating',
- headerText: 'User rating',
- type: 'number',
- sort: true,
- filter: true,
- cellTemplate: (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('value', params.value.toString());
- return rating;
- }
- }
- ];
}
+ protected ratingTemplate = (params: any) => {
+ const rating = document.createElement('igc-rating');
+ rating.setAttribute('readonly', '');
+ rating.setAttribute('value', params.value.toString());
+ return rating;
+ };
+
updateTheme(event: any) {
this.selectedTheme = event.detail.value;
}