Skip to content

Commit 9281d01

Browse files
Mariela TihovaMariela Tihova
Mariela Tihova
authored and
Mariela Tihova
committed
fix(column-config-dynamic): dropdown, non-working filtering and other
1 parent 42103d9 commit 9281d01

3 files changed

Lines changed: 129 additions & 39 deletions

File tree

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

Lines changed: 66 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,68 @@
11
<div class="grid-lite-wrapper">
2-
<section class="panel">
3-
<igc-switch
4-
label-position="before"
5-
[checked]="hasFormatters"
6-
(igcChange)="hasFormatters = $event.detail.checked">
7-
Value formatters:
8-
</igc-switch>
9-
</section>
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>
1043

11-
<igc-grid-lite [data]="data">
12-
<igc-grid-lite-column field="id" header="ID" width="15rem" hidden></igc-grid-lite-column>
13-
<igc-grid-lite-column field="name" header="Product Name" width="15rem"></igc-grid-lite-column>
14-
<igc-grid-lite-column field="price" header="Price" data-type="number" width="15rem" [cellTemplate]="hasFormatters ? formatCurrency : undefined"></igc-grid-lite-column>
15-
<igc-grid-lite-column field="sold" header="Units sold" data-type="number" width="15rem"></igc-grid-lite-column>
16-
<igc-grid-lite-column field="total" header="Total sold" width="15rem" [cellTemplate]="hasFormatters ? formatCurrency : undefined"></igc-grid-lite-column>
17-
<igc-grid-lite-column field="rating" header="Customer rating" data-type="number" width="15rem" [cellTemplate]="ratingTemplate"></igc-grid-lite-column>
18-
</igc-grid-lite>
19-
</div>
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 & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +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-
padding: 1rem;
13-
display: flex;
14-
justify-content: space-between;
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%;
1529
}
1630

1731
igc-grid-lite {
18-
min-height: 65vh;
32+
min-height: 65vh;
33+
--ig-size: 2;
1934
}

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

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,53 @@
11
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);
1931

2032
public data: ProductInfo[] = [];
2133
public hasFormatters = true;
2234

23-
public formatter = new Intl.NumberFormat('en-150', {
24-
style: 'currency',
25-
currency: 'EUR'
26-
});
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' });
2745

2846
ngOnInit() {
2947
this.data = this.dataService.generateProducts(50);
3048
}
3149

32-
protected formatCurrency = (params: any) => {
33-
return this.formatter.format(params.value);
34-
};
50+
protected formatCurrency = (params: any) => this.formatter.format(params.value);
3551

3652
protected ratingTemplate = (params: any) => {
3753
const rating = document.createElement('igc-rating');
@@ -40,4 +56,14 @@ export class GridLiteColumnConfigDynamicComponent implements OnInit {
4056
rating.setAttribute('value', params.value.toString());
4157
return rating;
4258
};
59+
60+
toggleColumnProperty(column: any, property: string, value: boolean) {
61+
column[property] = value;
62+
// Trigger Angular change detection
63+
this.columns = [...this.columns];
64+
}
65+
66+
toggleFormatters(event: any) {
67+
this.hasFormatters = event.detail.checked;
68+
}
4369
}

0 commit comments

Comments
 (0)