JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › adding new column › Reply To: adding new column
August 17, 2021 at 8:21 am
#102134
Member
Hi Dark Becccio,
Yes, the functionality you need is possible with the SmartGrid component and I have also create a quick code example using the demo for adding columns to the grid as a base for it.
addColumn.addEventListener('click', function (event) {
for (let i = 0; i < columnsList.length; i++) {
let alreadyAdded = false;
for (let j = 0; j < columns.length; j++) {
const column = columns[j];
if (column && column.label === columnsList[i]) {
alreadyAdded = true;
break;
}
}
if (alreadyAdded) {
continue;
}
let gridDataFields = grid.dataSource.dataFields;
const newDataField = {name: 'ID', dataType:'number'};
gridDataFields.push(newDataField);
const newGridDataSource = new window.Smart.DataAdapter({
dataSource: window.getCountriesData(),
dataFields: gridDataFields
});
grid.dataSource= newGridDataSource;
const newColumn = new window.Smart.Grid.Column({ label: columnsList[i], dataField: columnsList[i] });
columns.push(newColumn);
grid.refresh();
break;
}
updateButtonsDisabledState();
});
Note that I have removed the “ID” datafield from the grid’s datasource when its initialy loaded like so:
window.Smart('#grid', class {
get properties() {
return {
dataSource: new window.Smart.DataAdapter({
dataSource: window.getCountriesData(),
dataFields: [
'Country: string',
'Area: number',
'Population_Urban: number',
'Population_Rural: number',
'Population_Total: number',
'GDP_Agriculture: number',
'GDP_Industry: number',
'GDP_Services: number',
'GDP_Total: number'
]
}),
columns: [
'Country',
'Area',
'Population_Rural',
'Population_Total',
'GDP_Total'
]
};
}
});
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/