JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › adding new column
Tagged: #grid #addNewColumn
- This topic has 2 replies, 2 voices, and was last updated 3 years, 1 month ago by Dark Beccio.
-
AuthorPosts
-
August 16, 2021 at 1:44 pm #102133Dark BeccioMember
hi,
i was looking this demo where u can add a new column in the grid.
https://www.htmlelements.com/demos/grid/dynamic-columns/
the problem is the column datafield that is already loaded inside the grid.
Is it possible to create a new column with a new datafield not yet loaded inside grid smart data adapter?
something like
const columns = myGrid.columns;
const newDataField = [some data];
const newColumn = new Smart.Grid.Column({label: newLabel, dataField:newDataField ,dataType:string );
columns.push(newColumn);
myGrid.refresh();
TY
<pre class=”prettyprint prettyprinted”>August 17, 2021 at 8:21 am #102134YavorDashevMemberHi 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/August 17, 2021 at 9:35 am #102135Dark BeccioMemberworks great ty =)
-
AuthorPosts
- You must be logged in to reply to this topic.