Update TreeGrid DataSource

[Anonymous]

Hi,
I am trying to load a new DataSource in an already populated treeGrid, but the treeGrid displayed is not reloaded with the new data (is displayed the previous Datasource), can you help me? Below the code used for load the treeGrid:
The function loadTreeGrid is called at the click of a button that retrieves the data of DataSource
function loadTreeGrid(myDataSourceArray) {
Smart(‘#treeGrid’, class {
get properties() {
return {
behavior: { columnResizeMode: ‘growAndShrink’ },
appearance: {
alternationCount: 2,
showRowHeader: true,
showRowHeaderSelectIcon: true,
showRowHeaderFocusIcon: true
},
dataSource: new Smart.DataAdapter(
{
dataSource: myDataSourceArray,
keyDataField: ‘idChild’,
parentDataField: ‘idFat’,
id: ‘idChild’,
dataFields: [
‘idChild: number’,
‘field1: string’,
‘field2: string’,
‘field3: string’,
‘field4: string’
]
}),
columns: [ {
label : ‘field1’,
dataField : ‘field1’,
},
{
label : ‘field2’,
dataField : ‘field2’,
},
{
label : ‘field3’,
dataField : ‘field3’,
},
{
label : ‘field4’,
dataField : ‘field4’,
},
]
}
}
});
}
Thanks,
Walter Mariani

[yavordashew]

Hi Walter,
For your particular case I would suggest you to take a look at the dataGrid update data demo where you will find a case similar to yours.
However I have made a code snippet with a code with the result you want to achieve:
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];
var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];
var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Caramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];
var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];
// myDataSourceArray its just an example data
var myDataSourceArray = [firstNames, lastNames, productNames, priceValues]
updateBtn.onclick = () => {
console.log(‘DataUpdated’)
const grid = document.querySelector(“#treegrid”);
grid.dataSource = new window.Smart.DataAdapter({
dataSource: myDataSourceArray,
dataFields: [
‘id: number’,
‘firstName: string’,
‘lastName: string’,
‘productName: string’,
‘quantity: number’,
‘price: number’,
‘total: number’
]
})
}
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Anonymous]

Hi Yavor,
Thank you for the reply, I have see the demos and try to reload the datasource for my TreeGrid (I don’t reload the page but only change the datasource in the same smart-grid element), but the smart-grid element is not reloaded with new datasource, this changes correctly only if I dynamically remove and re-create the smart-grid element. If I recall the same function for 3 times (for example) with 3 different datasource, also the export create 3 files with the first datasource.
In the html page I have the tag:
<smart-grid id=”treeGrid” style=”width: 100%”></smart-grid>
and in the js, when click the button for obtain the datasource, I call this function:
function loadTreeGrid(myDataSourceArray) {
var grid = document.querySelector(‘#treeGrid’);
new window.Smart(‘#treeGrid’, class {
get properties() {
return {
behavior: { columnResizeMode: ‘growAndShrink’ },
filtering: {
enabled: true
},
sorting: {
enabled: false
},
dataSource: new window.Smart.DataAdapter(
{
dataSource: myDataSourceArray,
keyDataField: ‘id’,
parentDataField: ‘idFather’,
id: ‘id’,
dataFields:
[
‘id: number’,
‘idFather: number’,
‘Field1: string’,
‘Field2: string’,
‘Field3: string’,
‘Field4: string’,
‘Field5: number’,
]
}),
columns: [
{
label : ‘Field1’,
dataField : ‘Field1’,
},
{
label : ‘Field2’,
dataField : ‘Field2’,
},
{
label : ‘Field3’,
dataField : ‘Field3’,
},
{
label : ‘Field4’,
dataField : ‘Field4’,
},
{
label : ‘Field5’,
dataField : ‘Field5’,
},
]
}
}
});
var xlsxBtn = document.querySelector(‘#excelExport’);
var htmlBtn = document.querySelector(‘#csvExport’);
xlsxBtn.addEventListener(‘click’, () => {
grid.exportData(‘xlsx’);
});
htmlBtn.addEventListener(‘click’, () => {
grid.exportData(‘html’);
});
}
This is an example format of my Datasource (the stringify of my datasource):
myDataSourceArray=[{“id”:1,”idFather”:0,”Field1″:”0″,”Field2″:”test2″,”Field3″:”10″,”Field4″:”Data2″,”Field5″:1},
{“id”:2,”idFather”:0,”Field1″:”0″,”Field2″:”test1″,”Field3″:”20″,”Field4″:”Data1″,”Field5″:1},
{“id”:0,”idFather”:”null”,”Field1″:”111″,”Field2″:”test3″,”Field3″:”5″,”Field4″:”Data3″,”Field5″:1}]
It’s possible to reload the smart-grid element with different datasource without recreate the element?
Thanks,
Walter Mariani

[admin]

Hi Walter,
In order to change the datasource of the Grid, you need to set the dataSource property. To update the dataSource, set the property to a new value.
Example: https://www.htmlelements.com/demos/grid/datagrid-update-data/
Best Regards,
Peter Stoev
https://www.htmlelements.com/
Smart UI Team

[Author]

Posts