Refresh data that is displayed

Question

I have a grid with about 100 rows and I need to read each row and send some data to an api web service. The web service returns updated information about that person that I need to update on the grid. I have an array that is my original datasource

<ejs-grid :dataSource="this.excelData.results" height=400> and

changeItem(){

this.excelData.results[5]["Last_Name"] = "SMITH"

var grid = this.$refs.grid.ej2Instances;

grid.dataSource = this.excelData.results;

},

But this does not change what is showing in the grid. Is there a refresh property.

Do you think this is the most efficient way to update the data? 100 rows?

Sujith Kumar Rajkumar · Answer

Hi William, 
 
Greetings from Syncfusion support. 
 
You can change the grid’s data source by directly assigning the modified data to its data source property like given in below code snippet, 
 




// Button click event 
clickHandler: function(args) { 
            var gridData = orderData; 
            gridData[0].CustomerID = "John"; 
            this.$refs.grid.ej2Instances.dataSource = gridData; 
} 
 
Sample for your reference, 
 
Sample: https://codesandbox.io/s/vue-template-c3nze 
 
We suspect your reported problem might be occurring due to object reference maintained in the data as you are modifying the same data that is assigned to the grid initially and then reassigning it to the dataSource. So we suggest you to either clone the data and then update the new value and assign it to the grid’s dataSource or use the initially loaded data in the vue application. You could also call the grid’s refresh method to update the data source in your method. 
 
Refresh API documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#refresh 
 
If you wish to update only particular cell values or row data then you can use the setCellValue, setRowData and updateRow methods. 
 
API links: https://ej2.syncfusion.com/vue/documentation/api/grid/#setcellvalue 
                 https://ej2.syncfusion.com/vue/documentation/api/grid/#setrowdata 
                 https://ej2.syncfusion.com/vue/documentation/api/grid/#updaterow 
 
Please get back to us if you have any further queries. 
 
Regards, 
Sujith R