Skip to content

Commit 72d4538

Browse files
CopilotCopilot
authored
Merge pull request #3885 from IgniteUI/copilot/update-grid-lite-samples
Migrate Grid Lite samples to v0.4.0 declarative column API
1 parent 8275dcc commit 72d4538

File tree

32 files changed

+359
-735
lines changed

32 files changed

+359
-735
lines changed

‎src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html‎

Lines changed: 67 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,68 @@
11
<div class="grid-lite-wrapper">
2-
<section class="panel">
3-
<igc-button variant="outlined">Column properties</igc-button>
4-
<igc-switch
5-
label-position="before"
6-
[checked]="hasFormatters"
7-
(igcChange)="toggleFormatters($event.detail.checked)">
8-
Value formatters:
9-
</igc-switch>
10-
</section>
11-
12-
<igc-grid-lite
13-
#gridLite
14-
[columns]="columns"
15-
[data]="data">
16-
</igc-grid-lite>
17-
</div>
2+
<section class="panel">
3+
<button igxButton="outlined" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">
4+
Column Properties
5+
</button>
6+
<igx-drop-down #dropdown [isOverlay]="true" [autoClose]="false" [closed]="false">
7+
@for (column of columns; track column) {
8+
<igx-drop-down-item>
9+
<div class="config">
10+
<span class="config-key">{{ column.header }}</span>
11+
<igx-checkbox
12+
#hiddenChk
13+
[checked]="column.hidden"
14+
(click)="$event.stopPropagation()"
15+
(change)="toggleColumnProperty(column, 'hidden', hiddenChk.checked)">
16+
Hidden
17+
</igx-checkbox>
18+
<igx-checkbox
19+
#resizableChk
20+
[checked]="column.resizable"
21+
(click)="$event.stopPropagation()"
22+
(change)="toggleColumnProperty(column, 'resizable', resizableChk.checked)">
23+
Resizable
24+
</igx-checkbox>
25+
<igx-checkbox
26+
#filterChk
27+
[checked]="column.filterable"
28+
(click)="$event.stopPropagation()"
29+
(change)="toggleColumnProperty(column, 'filterable', filterChk.checked)">
30+
Filter
31+
</igx-checkbox>
32+
<igx-checkbox
33+
#sortableChk
34+
[checked]="column.sortable"
35+
(click)="$event.stopPropagation()"
36+
(change)="toggleColumnProperty(column, 'sortable', sortableChk.checked)">
37+
Sort
38+
</igx-checkbox>
39+
</div>
40+
</igx-drop-down-item>
41+
}
42+
</igx-drop-down>
43+
44+
<igx-switch
45+
labelPosition="before"
46+
[checked]="hasFormatters"
47+
(igxChange)="toggleFormatters($event)">
48+
Value formatters:
49+
</igx-switch>
50+
</section>
51+
52+
<igc-grid-lite [data]="data">
53+
@for (col of columns; track col) {
54+
<igc-grid-lite-column
55+
[field]="col.field"
56+
[header]="col.header"
57+
[dataType]="col.dataType"
58+
[hidden]="col.hidden"
59+
[resizable]="col.resizable"
60+
[sortable]="col.sortable"
61+
[filterable]="col.filterable"
62+
[cellTemplate]="col.field === 'price' || col.field === 'total'
63+
? (hasFormatters ? formatCurrency : undefined)
64+
: (col.field === 'rating' ? ratingTemplate : undefined)">
65+
</igc-grid-lite-column>
66+
}
67+
</igc-grid-lite>
68+
</div>

‎src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.scss‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
1-
:host {
2-
contain: content;
3-
--ig-size: 2;
1+
.panel {
2+
margin: 1rem 0;
3+
display: flex;
4+
flex-flow: row nowrap;
5+
justify-content: space-between;
6+
align-items: center;
47
}
58

6-
.grid-lite-wrapper {
7-
width: 100%;
8-
height: calc(100% - 50px);
9+
.config {
10+
display: grid;
11+
grid-template-columns: 180px repeat(4, max-content);
12+
column-gap: 1rem;
13+
align-items: center;
14+
width: 100%;
915
}
1016

11-
.panel {
12-
margin: 1rem 0;
13-
display: flex;
14-
flex-flow: row nowrap;
15-
justify-content: space-between;
16-
align-items: center;
17+
.config-key {
18+
font-weight: bold;
19+
white-space: nowrap;
20+
}
21+
22+
.config igx-checkbox {
23+
white-space: nowrap;
24+
}
25+
26+
.grid-lite-wrapper {
27+
width: 100%;
28+
height: 100%;
1729
}
1830

1931
igc-grid-lite {
20-
min-height: 65vh;
32+
min-height: 65vh;
33+
--ig-size: 2;
2134
}

‎src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts‎

Lines changed: 44 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,69 @@
1-
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
22
import { CommonModule } from '@angular/common';
3-
import { defineComponents, IgcButtonComponent, IgcCheckboxComponent, IgcDropdownComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
3+
import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives';
4+
import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
5+
import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down';
46
import { IgcGridLite } from 'igniteui-grid-lite';
7+
import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
58
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
69

710
IgcGridLite.register();
8-
defineComponents(IgcCheckboxComponent, IgcDropdownComponent, IgcSwitchComponent, IgcButtonComponent);
11+
defineComponents(IgcRatingComponent);
912

1013
@Component({
1114
selector: 'app-grid-lite-column-config-dynamic',
1215
templateUrl: './grid-lite-column-config-dynamic.component.html',
1316
styleUrls: ['./grid-lite-column-config-dynamic.component.scss'],
14-
imports: [CommonModule],
15-
schemas: [CUSTOM_ELEMENTS_SCHEMA]
17+
imports: [
18+
CommonModule,
19+
IgxButtonDirective,
20+
IgxToggleActionDirective,
21+
IgxDropDownItemNavigationDirective,
22+
IgxDropDownComponent,
23+
IgxDropDownItemComponent,
24+
IgxCheckboxComponent
25+
],
26+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
27+
standalone: true
1628
})
1729
export class GridLiteColumnConfigDynamicComponent implements OnInit {
1830
private dataService = inject(GridLiteDataService);
19-
20-
@ViewChild('gridLite', { static: false }) gridLite!: ElementRef;
21-
31+
2232
public data: ProductInfo[] = [];
23-
public columns: any[] = [];
2433
public hasFormatters = true;
2534

26-
private formatter = new Intl.NumberFormat('en-EN', {
27-
style: 'currency',
28-
currency: 'EUR'
29-
});
35+
public columns = [
36+
{ field: 'id', header: 'ID', hidden: true, resizable: true, sortable: false, filterable: false },
37+
{ field: 'name', header: 'Product Name', hidden: false, resizable: true, sortable: false, filterable: false },
38+
{ field: 'price', header: 'Price', hidden: false, resizable: true, sortable: false, filterable: false },
39+
{ field: 'sold', header: 'Units sold', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' },
40+
{ field: 'total', header: 'Total sold', hidden: false, resizable: true, sortable: false, filterable: false },
41+
{ field: 'rating', header: 'Customer rating', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' }
42+
];
43+
44+
public formatter = new Intl.NumberFormat('en-150', { style: 'currency', currency: 'EUR' });
3045

3146
ngOnInit() {
3247
this.data = this.dataService.generateProducts(50);
33-
34-
this.columns = [
35-
{
36-
key: 'id',
37-
hidden: true,
38-
headerText: 'ID',
39-
width: '15rem'
40-
},
41-
{
42-
key: 'name',
43-
headerText: 'Product Name',
44-
width: '15rem'
45-
},
46-
{
47-
key: 'price',
48-
headerText: 'Price',
49-
type: 'number',
50-
width: '15rem',
51-
cellTemplate: (params: any) => {
52-
const span = document.createElement('span');
53-
span.textContent = this.formatter.format(params.value);
54-
return span;
55-
}
56-
},
57-
{
58-
key: 'sold',
59-
type: 'number',
60-
headerText: 'Units sold',
61-
width: '15rem'
62-
},
63-
{
64-
key: 'total',
65-
headerText: 'Total sold',
66-
width: '15rem',
67-
cellTemplate: (params: any) => {
68-
const span = document.createElement('span');
69-
span.textContent = this.formatter.format(params.value);
70-
return span;
71-
}
72-
},
73-
{
74-
key: 'rating',
75-
type: 'number',
76-
headerText: 'Customer rating',
77-
width: '15rem',
78-
cellTemplate: (params: any) => {
79-
const rating = document.createElement('igc-rating');
80-
rating.setAttribute('readonly', '');
81-
rating.setAttribute('step', '0.01');
82-
rating.setAttribute('value', params.value.toString());
83-
return rating;
84-
}
85-
}
86-
];
8748
}
8849

89-
updateColumnProperty(key: string, prop: string, value: any) {
90-
const grid = this.gridLite?.nativeElement as any;
91-
if (grid && grid.updateColumns) {
92-
grid.updateColumns({ key, [prop]: value });
93-
}
50+
protected formatCurrency = (params: any) => this.formatter.format(params.value);
51+
52+
protected ratingTemplate = (params: any) => {
53+
const rating = document.createElement('igc-rating');
54+
rating.setAttribute('readonly', '');
55+
rating.setAttribute('step', '0.01');
56+
rating.setAttribute('value', params.value.toString());
57+
return rating;
58+
};
59+
60+
toggleColumnProperty(column: any, property: string, value: boolean) {
61+
column[property] = value;
62+
// Trigger Angular change detection
63+
this.columns = [...this.columns];
9464
}
9565

96-
toggleFormatters(enabled: boolean) {
97-
this.hasFormatters = enabled;
98-
const grid = this.gridLite?.nativeElement as any;
99-
if (grid && grid.updateColumns) {
100-
const updates = ['price', 'total'].map(key => ({
101-
key,
102-
cellTemplate: enabled ? (params: any) => {
103-
const span = document.createElement('span');
104-
span.textContent = this.formatter.format(params.value);
105-
return span;
106-
} : undefined
107-
}));
108-
grid.updateColumns(updates);
109-
}
66+
toggleFormatters(event: any) {
67+
this.hasFormatters = event.detail.checked;
11068
}
11169
}

‎src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<div class="grid-lite-wrapper">
2-
<igc-grid-lite
3-
[columns]="columns"
4-
[data]="data">
2+
<igc-grid-lite [data]="data">
3+
<igc-grid-lite-column field="name" header="Product Name"></igc-grid-lite-column>
4+
<igc-grid-lite-column field="price" header="Price (€)" data-type="number"></igc-grid-lite-column>
5+
<igc-grid-lite-column field="sold" header="Units Sold" data-type="number"></igc-grid-lite-column>
6+
<igc-grid-lite-column field="total" header="Total Revenue" data-type="number"></igc-grid-lite-column>
7+
<igc-grid-lite-column field="rating" header="Customer Rating ⭐" data-type="number" [cellTemplate]="ratingTemplate"></igc-grid-lite-column>
58
</igc-grid-lite>
69
</div>

‎src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts‎

Lines changed: 9 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,45 +16,18 @@ defineComponents(IgcRatingComponent);
1616
})
1717
export class GridLiteColumnConfigHeadersComponent implements OnInit {
1818
private dataService = inject(GridLiteDataService);
19-
19+
2020
public data: ProductInfo[] = [];
21-
public columns: any[] = [];
2221

2322
ngOnInit() {
2423
this.data = this.dataService.generateProducts(50);
25-
26-
this.columns = [
27-
{
28-
key: 'name',
29-
headerText: 'Product Name'
30-
},
31-
{
32-
key: 'price',
33-
headerText: 'Price (€)',
34-
type: 'number'
35-
},
36-
{
37-
key: 'sold',
38-
type: 'number',
39-
headerText: 'Units Sold'
40-
},
41-
{
42-
key: 'total',
43-
headerText: 'Total Revenue',
44-
type: 'number'
45-
},
46-
{
47-
key: 'rating',
48-
type: 'number',
49-
headerText: 'Customer Rating ⭐',
50-
cellTemplate: (params: any) => {
51-
const rating = document.createElement('igc-rating');
52-
rating.setAttribute('readonly', '');
53-
rating.setAttribute('step', '0.01');
54-
rating.setAttribute('value', params.value.toString());
55-
return rating;
56-
}
57-
}
58-
];
5924
}
25+
26+
protected ratingTemplate = (params: any) => {
27+
const rating = document.createElement('igc-rating');
28+
rating.setAttribute('readonly', '');
29+
rating.setAttribute('step', '0.01');
30+
rating.setAttribute('value', params.value.toString());
31+
return rating;
32+
};
6033
}

‎src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<div class="grid-lite-wrapper">
2-
<igc-grid-lite
3-
[columns]="columns"
4-
[data]="data">
2+
<igc-grid-lite [data]="data">
3+
<igc-grid-lite-column field="name" header="Product Name"></igc-grid-lite-column>
4+
<igc-grid-lite-column field="price" header="Price" data-type="number" [cellTemplate]="formatCurrency"></igc-grid-lite-column>
5+
<igc-grid-lite-column field="sold" header="Units sold" data-type="number"></igc-grid-lite-column>
6+
<igc-grid-lite-column field="total" header="Total sold" [cellTemplate]="formatCurrency"></igc-grid-lite-column>
7+
<igc-grid-lite-column field="rating" header="Customer rating" data-type="number" [cellTemplate]="ratingTemplate"></igc-grid-lite-column>
58
</igc-grid-lite>
69
</div>

0 commit comments

Comments
 (0)