+
+
+
+
@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..bf087b8b2 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
@@ -18,45 +18,20 @@ 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;
- }
- }
- ];
}
+ formatCheckbox = (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..3593e2aa8 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
@@ -9,9 +9,12 @@
Generated request
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..c329c00e8 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
@@ -18,45 +18,12 @@ 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,6 +36,14 @@ export class GridLiteFilteringPipelineComponent implements OnInit {
};
}
+ formatCheckbox = (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[] = [];
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..64d259fc1 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..098bad469 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
@@ -18,41 +18,16 @@ 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;
- }
- }
- ];
}
+
+ formatCheckbox = (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..759717371 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..534b04ea4 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
@@ -30,101 +30,56 @@ 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;
- }
- }
- ];
}
+
+ formatAvatar = (params: any) => {
+ const cell = document.createElement('igc-avatar');
+ cell.setAttribute('shape', 'circle');
+ cell.setAttribute('alt', 'User avatar');
+ cell.setAttribute('src', params.value);
+ return cell;
+ };
+
+ formatPriority = (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);
+
+ formatSatisfaction = (params: any) => {
+ const rating = document.createElement('igc-rating');
+ rating.setAttribute('readonly', '');
+ rating.setAttribute('value', params.value.toString());
+ return rating;
+ };
+
+ formatRegisteredAt = (params: any) => {
+ const span = document.createElement('span');
+ span.textContent = params.value.toLocaleString();
+ return span;
+ };
+
+ formatActive = (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..ebc73ffa3 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..359254c86 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
@@ -18,52 +18,20 @@ 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
- }
- ];
}
+ formatRating = (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()}]`;
}
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..44c94546e 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,19 @@
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..fbc5463f9 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
@@ -18,56 +18,27 @@ export class GridLiteSortingGridConfigComponent implements OnInit {
private dataService = inject(GridLiteDataService);
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
- }
- ];
}
+ formatRating = (params: any) => {
+ const rating = document.createElement('igc-rating');
+ rating.setAttribute('readonly', '');
+ rating.setAttribute('step', '0.01');
+ rating.setAttribute('value', params.value.toString());
+ return rating;
+ };
+
updateConfig(prop: string, value: boolean) {
- this.sortConfiguration = { ...this.sortConfiguration, [prop]: value };
+ if (prop === 'multiple') {
+ this.sortingOptions = { ...this.sortingOptions, mode: value ? 'multiple' : 'single' };
+ } else {
+ this.sortingOptions = { ...this.sortingOptions, [prop]: value };
+ }
}
}
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..6d998608a 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
@@ -9,9 +9,13 @@
Generated request
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..f3704969d 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
@@ -18,58 +18,18 @@ 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 {
};
}
+ formatRating = (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..4c54461bd 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..f534909b8 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
@@ -18,50 +18,18 @@ 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
- }
- ];
}
+
+ nameComparer = (a: string, b: string) => a.length - b.length;
+
+ formatRating = (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.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..965238f3b 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
@@ -13,7 +13,11 @@
+
+
+
+
+
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..93b8c1d14 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
@@ -18,7 +18,6 @@ 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;
- }
- }
- ];
}
+ formatRating = (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;
}
From 4c68fbee2b9e048fa8a619bd7dd9825eeb8bc724 Mon Sep 17 00:00:00 2001
From: damyanpetev
Date: Thu, 5 Feb 2026 12:15:51 +0200
Subject: [PATCH 2/2] refactor(grid-lite): revert extra bits, additional fixes
and cleanup
---
package-lock.json | 34 ----------------
...-lite-column-config-dynamic.component.html | 13 +++----
...-lite-column-config-dynamic.component.scss | 4 +-
...id-lite-column-config-dynamic.component.ts | 39 +++----------------
...-lite-column-config-headers.component.html | 2 +-
...id-lite-column-config-headers.component.ts | 4 +-
...d-lite-column-config-simple.component.html | 2 +-
...rid-lite-column-config-simple.component.ts | 12 +++---
...d-lite-data-binding-dynamic.component.html | 5 +--
...rid-lite-data-binding-dynamic.component.ts | 6 +--
.../grid-lite-filtering-events.component.html | 4 +-
.../grid-lite-filtering-events.component.ts | 4 +-
...rid-lite-filtering-pipeline.component.html | 4 +-
.../grid-lite-filtering-pipeline.component.ts | 8 ++--
.../grid-lite-filtering-simple.component.html | 2 +-
.../grid-lite-filtering-simple.component.ts | 4 +-
.../grid-lite-overview.component.html | 10 ++---
.../grid-lite-overview.component.ts | 18 ++++-----
.../grid-lite-sorting-events.component.html | 4 +-
.../grid-lite-sorting-events.component.ts | 6 +--
...id-lite-sorting-grid-config.component.html | 9 +++--
...grid-lite-sorting-grid-config.component.ts | 17 ++++----
.../grid-lite-sorting-pipeline.component.html | 4 +-
.../grid-lite-sorting-pipeline.component.ts | 4 +-
.../grid-lite-sorting-simple.component.html | 2 +-
.../grid-lite-sorting-simple.component.ts | 6 +--
.../grid-lite-styling-custom.component.scss | 2 +-
.../grid-lite-styling-themes.component.html | 6 +--
.../grid-lite-styling-themes.component.ts | 4 +-
29 files changed, 84 insertions(+), 155 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 2e1b3c940..7ec61d6aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2107,24 +2107,6 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
- "node_modules/@igniteui/angular-schematics/node_modules/chokidar": {
- "version": "4.0.3",
- "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
- "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
- "dev": true,
- "license": "MIT",
- "optional": true,
- "peer": true,
- "dependencies": {
- "readdirp": "^4.0.1"
- },
- "engines": {
- "node": ">= 14.16.0"
- },
- "funding": {
- "url": "https://paulmillr.com/funding/"
- }
- },
"node_modules/@igniteui/angular-schematics/node_modules/cli-cursor": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -2284,22 +2266,6 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
- "node_modules/@igniteui/angular-schematics/node_modules/readdirp": {
- "version": "4.1.2",
- "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
- "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
- "dev": true,
- "license": "MIT",
- "optional": true,
- "peer": true,
- "engines": {
- "node": ">= 14.18.0"
- },
- "funding": {
- "type": "individual",
- "url": "https://paulmillr.com/funding/"
- }
- },
"node_modules/@igniteui/angular-schematics/node_modules/restore-cursor": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
diff --git a/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html
index a505dd354..6eea4b3f5 100644
--- a/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html
+++ b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html
@@ -1,22 +1,19 @@
- Column properties
-
+ (igcChange)="hasFormatters = $event.detail.checked">
Value formatters:
-
-
+
+
-
+
diff --git a/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.scss b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.scss
index e5cc3df9a..8a50ec703 100644
--- a/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.scss
+++ b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.scss
@@ -9,11 +9,9 @@
}
.panel {
- margin: 1rem 0;
+ padding: 1rem;
display: flex;
- flex-flow: row nowrap;
justify-content: space-between;
- align-items: center;
}
igc-grid-lite {
diff --git a/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts
index fdf49fd0e..71e9c823d 100644
--- a/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts
+++ b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-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, IgcCheckboxComponent, IgcDropdownComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
import { IgcGridLite } from 'igniteui-grid-lite';
@@ -16,13 +16,11 @@ defineComponents(IgcCheckboxComponent, IgcDropdownComponent, IgcSwitchComponent,
})
export class GridLiteColumnConfigDynamicComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
- @ViewChild('gridLite', { static: false }) gridLite!: ElementRef;
-
+
public data: ProductInfo[] = [];
public hasFormatters = true;
- public formatter = new Intl.NumberFormat('en-US', {
+ public formatter = new Intl.NumberFormat('en-150', {
style: 'currency',
currency: 'EUR'
});
@@ -31,40 +29,15 @@ export class GridLiteColumnConfigDynamicComponent implements OnInit {
this.data = this.dataService.generateProducts(50);
}
- formatCurrency = (params: any) => {
- const span = document.createElement('span');
- span.textContent = this.formatter.format(params.value);
- return span;
+ protected formatCurrency = (params: any) => {
+ return this.formatter.format(params.value);
};
- formatRating = (params: any) => {
+ 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;
};
-
- updateColumnProperty(key: string, prop: string, value: any) {
- const grid = this.gridLite?.nativeElement as any;
- if (grid && grid.updateColumns) {
- grid.updateColumns({ key, [prop]: value });
- }
- }
-
- toggleFormatters(enabled: boolean) {
- this.hasFormatters = enabled;
- const grid = this.gridLite?.nativeElement as any;
- if (grid && grid.updateColumns) {
- const updates = ['price', 'total'].map(key => ({
- key,
- cellTemplate: enabled ? (params: any) => {
- const span = document.createElement('span');
- span.textContent = this.formatter.format(params.value);
- return span;
- } : undefined
- }));
- grid.updateColumns(updates);
- }
- }
}
diff --git a/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html b/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html
index f4e8bba8e..df8729a96 100644
--- a/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html
+++ b/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html
@@ -4,6 +4,6 @@
-
+
diff --git a/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts b/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts
index 22aa0b28c..60d1b3698 100644
--- a/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts
+++ b/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts
@@ -16,14 +16,14 @@ defineComponents(IgcRatingComponent);
})
export class GridLiteColumnConfigHeadersComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: ProductInfo[] = [];
ngOnInit() {
this.data = this.dataService.generateProducts(50);
}
- formatRating = (params: any) => {
+ protected ratingTemplate = (params: any) => {
const rating = document.createElement('igc-rating');
rating.setAttribute('readonly', '');
rating.setAttribute('step', '0.01');
diff --git a/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html b/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html
index 73fda3cac..83768a244 100644
--- a/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html
+++ b/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html
@@ -4,6 +4,6 @@
-
+
diff --git a/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.ts b/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.ts
index 2cda7d4b2..ed7a83759 100644
--- a/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.ts
+++ b/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.ts
@@ -16,10 +16,10 @@ defineComponents(IgcRatingComponent);
})
export class GridLiteColumnConfigSimpleComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: ProductInfo[] = [];
- public formatter = new Intl.NumberFormat('en-US', {
+ public formatter = new Intl.NumberFormat('en-150', {
style: 'currency',
currency: 'EUR'
});
@@ -28,13 +28,11 @@ export class GridLiteColumnConfigSimpleComponent implements OnInit {
this.data = this.dataService.generateProducts(50);
}
- formatCurrency = (params: any) => {
- const span = document.createElement('span');
- span.textContent = this.formatter.format(params.value);
- return span;
+ protected formatCurrency = (params: any) => {
+ return this.formatter.format(params.value);
};
- formatRating = (params: any) => {
+ protected ratingTemplate = (params: any) => {
const rating = document.createElement('igc-rating');
rating.setAttribute('readonly', '');
rating.setAttribute('step', '0.01');
diff --git a/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.html b/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.html
index 9e217c700..6630c55b7 100644
--- a/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.html
+++ b/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.html
@@ -1,8 +1,7 @@
Switch data
-
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 e3c6a78b8..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,9 +16,7 @@ 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';
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 f1662dbef..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,12 +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 bf087b8b2..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,7 +16,7 @@ defineComponents(IgcCheckboxComponent);
})
export class GridLiteFilteringEventsComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: User[] = [];
public log: string[] = [];
@@ -24,7 +24,7 @@ export class GridLiteFilteringEventsComponent implements OnInit {
this.data = this.dataService.generateUsers(50);
}
- formatCheckbox = (params: any) => {
+ protected checkboxTemplate = (params: any) => {
const checkbox = document.createElement('igc-checkbox');
if (params.value) {
checkbox.setAttribute('checked', '');
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 3593e2aa8..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,13 +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 c329c00e8..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,7 +16,7 @@ defineComponents(IgcCheckboxComponent, IgcCircularProgressComponent);
})
export class GridLiteFilteringPipelineComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: User[] = [];
public dataPipelineConfiguration: any;
public inOperation = false;
@@ -36,7 +36,7 @@ export class GridLiteFilteringPipelineComponent implements OnInit {
};
}
- formatCheckbox = (params: any) => {
+ protected checkboxTemplate = (params: any) => {
const checkbox = document.createElement('igc-checkbox');
if (params.value) {
checkbox.setAttribute('checked', '');
@@ -47,11 +47,11 @@ export class GridLiteFilteringPipelineComponent implements OnInit {
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 64d259fc1..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
@@ -3,6 +3,6 @@
-
+
-
+
-
-
-
-
+
+
+
+
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 534b04ea4..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,7 +28,7 @@ defineComponents(
})
export class GridLiteOverviewComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: User[] = [];
private choices = ['Low', 'Standard', 'High'];
@@ -36,7 +36,7 @@ export class GridLiteOverviewComponent implements OnInit {
this.data = this.dataService.generateUsers(1000);
}
- formatAvatar = (params: any) => {
+ protected avatarTemplate = (params: any) => {
const cell = document.createElement('igc-avatar');
cell.setAttribute('shape', 'circle');
cell.setAttribute('alt', 'User avatar');
@@ -44,38 +44,38 @@ export class GridLiteOverviewComponent implements OnInit {
return cell;
};
- formatPriority = (params: any) => {
+ 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);
- formatSatisfaction = (params: any) => {
+ protected satisfactionTemplate = (params: any) => {
const rating = document.createElement('igc-rating');
rating.setAttribute('readonly', '');
rating.setAttribute('value', params.value.toString());
return rating;
};
- formatRegisteredAt = (params: any) => {
+ protected registeredAtTemplate = (params: any) => {
const span = document.createElement('span');
span.textContent = params.value.toLocaleString();
return span;
};
- formatActive = (params: any) => {
+ protected activeTemplate = (params: any) => {
const checkbox = document.createElement('igc-checkbox');
if (params.value) {
checkbox.setAttribute('checked', '');
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 ebc73ffa3..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,11 +1,11 @@
-
-
+
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 359254c86..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,7 +16,7 @@ defineComponents(IgcRatingComponent);
})
export class GridLiteSortingEventsComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: ProductInfo[] = [];
public log: string[] = [];
@@ -24,7 +24,7 @@ export class GridLiteSortingEventsComponent implements OnInit {
this.data = this.dataService.generateProducts(100);
}
- formatRating = (params: any) => {
+ protected ratingTemplate = (params: any) => {
const rating = document.createElement('igc-rating');
rating.setAttribute('readonly', '');
rating.setAttribute('step', '0.01');
@@ -46,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 44c94546e..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
@@ -2,17 +2,18 @@
+ (igcChange)="updateConfig($event.detail.checked)">
Enable multi-sort
-
-
-
+
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 fbc5463f9..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,7 +16,9 @@ defineComponents(IgcRatingComponent, IgcSwitchComponent);
})
export class GridLiteSortingGridConfigComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
+ @ViewChild('gridLite', { static: true }) gridLite!: ElementRef;
+
public data: ProductInfo[] = [];
public sortingOptions: any = {
mode: 'multiple'
@@ -26,7 +28,7 @@ export class GridLiteSortingGridConfigComponent implements OnInit {
this.data = this.dataService.generateProducts(100);
}
- formatRating = (params: any) => {
+ protected ratingTemplate = (params: any) => {
const rating = document.createElement('igc-rating');
rating.setAttribute('readonly', '');
rating.setAttribute('step', '0.01');
@@ -34,11 +36,8 @@ export class GridLiteSortingGridConfigComponent implements OnInit {
return rating;
};
- updateConfig(prop: string, value: boolean) {
- if (prop === 'multiple') {
- this.sortingOptions = { ...this.sortingOptions, mode: value ? 'multiple' : 'single' };
- } else {
- this.sortingOptions = { ...this.sortingOptions, [prop]: value };
- }
+ 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 6d998608a..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,12 +8,12 @@
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 f3704969d..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,7 +16,7 @@ defineComponents(IgcRatingComponent, IgcCircularProgressComponent);
})
export class GridLiteSortingPipelineComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: ProductInfo[] = [];
public dataPipelineConfiguration: any;
public inOperation = false;
@@ -38,7 +38,7 @@ export class GridLiteSortingPipelineComponent implements OnInit {
};
}
- formatRating = (params: any) => {
+ protected ratingTemplate = (params: any) => {
const rating = document.createElement('igc-rating');
rating.setAttribute('readonly', '');
rating.setAttribute('step', '0.01');
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 4c54461bd..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
@@ -2,7 +2,7 @@
-
+
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 f534909b8..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,16 +16,16 @@ defineComponents(IgcRatingComponent);
})
export class GridLiteSortingSimpleComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: ProductInfo[] = [];
ngOnInit() {
this.data = this.dataService.generateProducts(100);
}
- nameComparer = (a: string, b: string) => a.length - b.length;
+ protected nameComparer = (a: string, b: string) => a.length - b.length;
- formatRating = (params: any) => {
+ protected ratingTemplate = (params: any) => {
const rating = document.createElement('igc-rating');
rating.setAttribute('readonly', '');
rating.setAttribute('step', '0.01');
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-themes/grid-lite-styling-themes.component.html b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html
index 965238f3b..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,14 +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 93b8c1d14..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,7 +16,7 @@ defineComponents(IgcRatingComponent, IgcSelectComponent, IgcSelectItemComponent)
})
export class GridLiteStylingThemesComponent implements OnInit {
private dataService = inject(GridLiteDataService);
-
+
public data: ProductInfo[] = [];
public selectedTheme = 'Bootstrap';
public themes = [
@@ -34,7 +34,7 @@ export class GridLiteStylingThemesComponent implements OnInit {
this.data = this.dataService.generateProducts(50);
}
- formatRating = (params: any) => {
+ protected ratingTemplate = (params: any) => {
const rating = document.createElement('igc-rating');
rating.setAttribute('readonly', '');
rating.setAttribute('value', params.value.toString());