Skip to content

Commit 912f7d8

Browse files
ChronosSFChronosSF
committed
fix(grid-lite): fixing issue with dynamic import sample
1 parent 6889eb1 commit 912f7d8

File tree

2 files changed

+59
-126
lines changed

2 files changed

+59
-126
lines changed

‎samples/grids/grid-lite/column-config-dynamic/index.html‎

Lines changed: 0 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -15,64 +15,6 @@
1515
<div id="root">
1616
<div class="container sample ig-typography">
1717
<section id="panel">
18-
<igc-dropdown id="dropdown" keep-open-on-select flip>
19-
<igc-button slot="target" variant="outlined">Column properties</igc-button>
20-
<igc-dropdown-item role="option" id="id">
21-
<div class="config">
22-
<span class="config-key">ID</span>
23-
<igc-checkbox class="hidden-checkbox" label-position="before" checked>Hidden</igc-checkbox>
24-
<igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
25-
<igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
26-
<igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
27-
</div>
28-
</igc-dropdown-item>
29-
<igc-dropdown-item role="option" id="name">
30-
<div class="config">
31-
<span class="config-key">Product Name</span>
32-
<igc-checkbox class="hidden-checkbox" label-position="before">Hidden</igc-checkbox>
33-
<igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
34-
<igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
35-
<igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
36-
</div>
37-
</igc-dropdown-item>
38-
<igc-dropdown-item role="option" id="price">
39-
<div class="config">
40-
<span class="config-key">Price</span>
41-
<igc-checkbox class="hidden-checkbox" label-position="before">Hidden</igc-checkbox>
42-
<igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
43-
<igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
44-
<igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
45-
</div>
46-
</igc-dropdown-item>
47-
<igc-dropdown-item role="option" id="sold">
48-
<div class="config">
49-
<span class="config-key">Units sold</span>
50-
<igc-checkbox class="hidden-checkbox" label-position="before">Hidden</igc-checkbox>
51-
<igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
52-
<igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
53-
<igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
54-
</div>
55-
</igc-dropdown-item>
56-
<igc-dropdown-item role="option" id="total">
57-
<div class="config">
58-
<span class="config-key">Total sold</span>
59-
<igc-checkbox class="hidden-checkbox" label-position="before">Hidden</igc-checkbox>
60-
<igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
61-
<igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
62-
<igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
63-
</div>
64-
</igc-dropdown-item>
65-
<igc-dropdown-item role="option" id="rating">
66-
<div class="config">
67-
<span class="config-key">Customer rating</span>
68-
<igc-checkbox class="hidden-checkbox" label-position="before">Hidden</igc-checkbox>
69-
<igc-checkbox class="resizable-checkbox" label-position="before">Resizable</igc-checkbox>
70-
<igc-checkbox class="filter-checkbox" label-position="before">Filter</igc-checkbox>
71-
<igc-checkbox class="sort-checkbox" label-position="before">Sort</igc-checkbox>
72-
</div>
73-
</igc-dropdown-item>
74-
</igc-dropdown>
75-
<igc-switch id="formattersSwitch" label-position="before" checked="true">Value formatters:</igc-switch>
7618
</section>
7719
<div class="grid-lite-wrapper" id="grid-lite"></div>
7820
</div>

‎samples/grids/grid-lite/column-config-dynamic/src/index.ts‎

Lines changed: 59 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -23,68 +23,83 @@ export class Sample {
2323
private dropdown: IgcDropdownComponent;
2424
private formattersSwitch: IgcSwitchComponent;
2525
protected hasFormatters = true;
26+
protected columns: any[];
2627
protected format = (params: any) => html`<span>${formatter.format(params.value)}</span>`;
2728

29+
private checkHandler = (col: any, prop: string, e: CustomEvent<IgcCheckboxChangeEventArgs>) => {
30+
const columnElement = this.gridLite!.querySelector(`#col-${col.field}`) as any;
31+
columnElement[prop] = e.detail.checked;
32+
}
33+
2834
constructor() {
2935
this.dataService = new GridLiteDataService();
30-
this.dropdown = document.getElementById('dropdown') as IgcDropdownComponent;
31-
this.formattersSwitch = document.getElementById('formattersSwitch') as IgcSwitchComponent;
32-
3336
const data: ProductInfo[] = this.dataService.generateProducts(50);
3437

38+
const controlPanel = document.getElementById('panel');
3539
const container = document.getElementById('grid-lite');
36-
40+
41+
this.columns = [
42+
{ field: 'id', header: 'ID', hidden: true, resizable: true, sortable: false, filterable: false },
43+
{ field: 'name', header: 'Product Name', hidden: false, resizable: true, sortable: false, filterable: false },
44+
{ field: 'price', header: 'Price', hidden: false, resizable: true, sortable: false, filterable: false },
45+
{ field: 'sold', header: 'Units sold', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' },
46+
{ field: 'total', header: 'Total sold', hidden: false, resizable: true, sortable: false, filterable: false },
47+
{ field: 'rating', header: 'Customer rating', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' }
48+
];
49+
50+
const ratingTemplate = (params: any) => html`<igc-rating readonly step="0.01" value=${params.value}></igc-rating>`;
51+
52+
const panelTemplate = html`
53+
<igc-dropdown id="dropdown" keep-open-on-select flip>
54+
<igc-button slot="target" variant="outlined">Column properties</igc-button>
55+
${this.columns.map(col => html`
56+
<igc-dropdown-item id=${col.field} role="option">
57+
<div class="config">
58+
<span class="config-key">${col.header}</span>
59+
<igc-checkbox @igcChange=${(e: CustomEvent<IgcCheckboxChangeEventArgs>) => this.checkHandler(col, 'hidden', e)} class="hidden-checkbox" ?checked=${col.hidden} label-position="before">Hidden</igc-checkbox>
60+
<igc-checkbox @igcChange=${(e: CustomEvent<IgcCheckboxChangeEventArgs>) => this.checkHandler(col, 'resizable', e)} class="resizable-checkbox" ?checked=${col.resizable} label-position="before">Resizable</igc-checkbox>
61+
<igc-checkbox @igcChange=${(e: CustomEvent<IgcCheckboxChangeEventArgs>) => this.checkHandler(col, 'sortable', e)} class="sort-checkbox" ?checked=${col.sortable} label-position="before">Sortable</igc-checkbox>
62+
<igc-checkbox @igcChange=${(e: CustomEvent<IgcCheckboxChangeEventArgs>) => this.checkHandler(col, 'filterable', e)} class="filter-checkbox" ?checked=${col.filterable} label-position="before">Filterable</igc-checkbox>
63+
</div>
64+
</igc-dropdown-item>
65+
`)}
66+
</igc-dropdown>
67+
<igc-switch id="formattersSwitch" label-position="before" checked="true">Value formatters:</igc-switch>
68+
`;
69+
3770
const template = html`
3871
<igc-grid-lite .data=${data}>
39-
<igc-grid-lite-column
40-
id="col-id"
41-
field="id"
42-
header="ID"
43-
hidden
44-
></igc-grid-lite-column>
45-
<igc-grid-lite-column
46-
id="col-name"
47-
field="name"
48-
header="Product Name"
49-
></igc-grid-lite-column>
50-
<igc-grid-lite-column
51-
id="col-price"
52-
field="price"
53-
header="Price"
54-
data-type="number"
55-
.cellTemplate=${this.format}
56-
></igc-grid-lite-column>
57-
<igc-grid-lite-column
58-
id="col-sold"
59-
field="sold"
60-
header="Units sold"
61-
data-type="number"
62-
></igc-grid-lite-column>
63-
<igc-grid-lite-column
64-
id="col-total"
65-
field="total"
66-
header="Total sold"
67-
.cellTemplate=${this.format}
68-
></igc-grid-lite-column>
69-
<igc-grid-lite-column
70-
id="col-rating"
71-
field="rating"
72-
header="Customer rating"
73-
data-type="number"
74-
.cellTemplate=${(params: any) => html`<igc-rating readonly step="0.01" value=${params.value}></igc-rating>`}
75-
></igc-grid-lite-column>
72+
${this.columns.map(col => html`
73+
<igc-grid-lite-column
74+
id="col-${col.field}"
75+
field=${col.field}
76+
header=${col.header}
77+
?hidden=${col.hidden}
78+
?resizable=${col.resizable}
79+
?sortable=${col.sortable}
80+
?filterable=${col.filterable}
81+
.cellTemplate=${col.field === 'price' || col.field === 'total'
82+
? this.format
83+
: col.field === 'rating'
84+
? ratingTemplate
85+
: undefined}
86+
></igc-grid-lite-column>
87+
`)}
7688
</igc-grid-lite>
7789
`;
78-
90+
91+
render(panelTemplate, controlPanel!);
7992
render(template, container!);
80-
93+
94+
this.dropdown = document.getElementById('dropdown') as IgcDropdownComponent;
95+
this.formattersSwitch = document.getElementById('formattersSwitch') as IgcSwitchComponent;
8196
this.gridLite = container!.querySelector('igc-grid-lite');
8297

8398
this.dropdown.addEventListener('igcChange', (e: any) => { this.dropdown.clearSelection(); });
8499
this.formattersSwitch.addEventListener('igcChange', (e: CustomEvent<IgcCheckboxChangeEventArgs>) => {
85100
const priceCol = this.gridLite!.querySelector('#col-price') as any;
86101
const totalCol = this.gridLite!.querySelector('#col-total') as any;
87-
102+
88103
if (e.detail.checked) {
89104
priceCol.cellTemplate = this.format;
90105
totalCol.cellTemplate = this.format;
@@ -93,30 +108,6 @@ export class Sample {
93108
totalCol.cellTemplate = undefined;
94109
}
95110
});
96-
97-
document.addEventListener('click', (e: MouseEvent) => {
98-
const target = e.target as HTMLElement;
99-
if (target.tagName.toLowerCase() === 'igc-checkbox') {
100-
const checkbox = target as IgcCheckboxComponent;
101-
const dropdownItem = checkbox.closest('igc-dropdown-item');
102-
const columnKey = dropdownItem?.id;
103-
const prop = Array.from(checkbox.classList).filter(c => c.endsWith('-checkbox'))[0].split('-')[0];
104-
105-
const column = this.gridLite!.querySelector(`#col-${columnKey}`) as any;
106-
if (column) {
107-
// Map property names for declarative API
108-
if (prop === 'hidden') {
109-
column.hidden = !checkbox.checked;
110-
} else if (prop === 'resizable') {
111-
column.resizable = checkbox.checked;
112-
} else if (prop === 'filter') {
113-
column.filterable = checkbox.checked;
114-
} else if (prop === 'sort') {
115-
column.sortable = checkbox.checked;
116-
}
117-
}
118-
}
119-
});
120111
}
121112
}
122113

0 commit comments

Comments
 (0)