Help With Using One Grid for Different Data Sets

[admin]

Hey there, I am trying to use a single grid for different data sets. This means that I am altering the data source and columns. I am having issues getting it to work properly.
 
What is the proper procedure for updating columns, dataSource.dataSource and dataSource.dataFields?
 
Currently, when I change the columns and data info, the template column I have does not render and the data does not load.
 
this is my update code which is called after the grid has already been initialized with data.
const grid = document.querySelector(“#formGrid”);
grid.beginUpdate();
grid.columns = [
{ label: ‘Project’, dataField: ‘projectName’ },
{ label: ‘Created By’, dataField: ‘createdUser’ },
{ label: ‘Created Time’, dataField: ‘createdDate’ },
{ label: ‘Last Updated Time’, dataField: ‘updatedDate’ },
{ label: ‘Status’, dataField: ‘status’ },
{
label: ‘Actions’, width: 90, allowResize: ‘false’, template: function (formatObject) {
const editImg = document.createElement(‘img’);
const deleteImg = document.createElement(‘img’);
editImg.src = “UI/edit_icon.svg”;
editImg.style = “width:24px; height:24px; float:left;margin-left:5px;margin-top:3px”;
deleteImg.src = “UI/delete_icon.svg”;
deleteImg.style = “width:24px; height:24px;float:right;margin-right:5px;margin-top:3px;”;
editImg.row = formatObject.row;
deleteImg.row = formatObject.row;
const template = document.createElement(‘div’);
template.appendChild(editImg);
template.appendChild(deleteImg);
formatObject.template = template;
}
}
];
grid.behavior = { columnResizeMode: ‘growAndShrink’ };
if (ObjectIsUndefined(grid.dataSource)) {
grid.dataSource = new Smart.DataAdapter(
{
dataSource: [
{
projectName: ‘Dummy Form’,
createdUser: ‘Smart Guy’,
createdDate: ‘Smarter Person’,
updatedDate: ‘2020-01-28’,
status: ‘2’
}],
dataFields:
[
‘projectName: string’,
‘createdUser: string’,
‘createdDate: string’,
‘updatedDate: string’,
‘status: number’,
]
});
} else {
grid.dataSource.dataSource = [
{
projectName: ‘Dummy Form’,
createdUser: ‘Smart Guy’,
createdDate: ‘Smarter Person’,
updatedDate: ‘2020-01-28’,
status: ‘2’
}
];
grid.dataSource.dataFields = [
‘projectName: string’,
‘createdUser: string’,
‘createdDate: string’,
‘updatedDate: string’,
‘status: number’,
];
}
grid.refresh();
grid.endUpdate();
 

[admin]

Hi ctstrist,
Please refer to the following example that demonstrates how to switch the Grid’s dataSource and columns dynamically: https://codepen.io/dimitar_jqwidgets/pen/eYNOPWE.
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com

[Ronak]

Hello,
 
I’m facing one issue with this grid. I want to display the summary row in both data sources. So it will display the summary the first time but when I change Datasource it won’t display the summary row for 2nd Datasource and when I shift back to the first then it shows the summary row.
I set the below code for the grid and I’m using the angular.
grid.summaryRow = {
visible: true,
};
one strange behaviour I found sometimes summary row get visible if i resize the browser windows.  so it might be issues with render so i put the grid.refresh and refreshview too. but it wont display summary for the 2nd grid.
Please suggest something to achieve the same.
Note :
I try below url with the mention issues i got the same result in this codpen example too.
https://codepen.io/dimitar_jqwidgets/pen/eYNOPWE.
Thank You
 

[yavordashew]

Hi Ronak,
I used the codepen example you shared but unfortunately when I tried to reproduce your issue it didn’t occur as it happens to you.
Even when you have set the grid summaryRow property you still need to set the summary property of the column you want the summaryRow to be displayed.
For example :
` columns = [
{
label: ‘First Name’, dataField: ‘firstName’
},
{ label: ‘Last Name’, dataField: ‘lastName’ },
{ label: ‘Product’, dataField: ‘productName’ },
{ label: ‘Quantity’,summary: [‘sum’], dataField: ‘quantity’ }];`
If this is not the case I recommend to share a code example in order to be able to find a solution 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/

[Author]

Posts