Update row values without changing view position

[Mohamed BENNOUR]

Hi Team,

We tried to update a row attributes when we get a server event and in out code the grid dataSource is binded with rowData values and the grid have pagination.

Every column is dynamic and each column call a component to render the cell. The component contains most of time pictures and color based on data value.

To update a row, we get the rowData index and update it's attributes like rowData[index] = newObjectValues;

With that, no change appear if the updated object is in the current page but if the object is in another page, it's correctly renderer if we go to this other page.

We tried to use grid.refresh() to have an update of the current view. It's work but we loose the current page position and the scrollbar go to the initial horizontal position.

1 - How can we update the current view renderer without changing anything of the position or the selected elements ?

2 - Is it possible to update a specific row renderer ?

Regards

[Sujith Kumar Rajkumar]

Hi Mohamed, 

Greetings from Syncfusion support. 

We are not able to identify the exact requirement from your query. Do you wish to modify the data retrieved from server or dynamically update the row data? Can you please elaborate on your requirement so that we can check and provide the proper solution. Also from your query we suspect you are binding the data returned from the server directly to the Grid’s dataSource as local data. Can you confirm on this or let us know how you have bound data to the Grid. 

Let us know if you have any concerns. 

Regards, 

Sujith R 

[Mohamed BENNOUR]

Hi Sujith,

We bind dataSource as rowData local data and columns as columnDefs local data (rowData and columnDefs are their names in our code).

Every row has a unique identifier in a column with aprimary key attribute

Every column has an ng-template using a custom componant.

After rendering the grid, the server sends a message to update a value of the row object.

We then modify the right row index  value from the rowData local value.

If this row is in another page then when we go to the page, the row renderer is good but if the row is in front of us, we don't see the change.

Regards

[Sujith Kumar Rajkumar]

Hi Mohamed, 

Thanks for the information. 

 

From the provided information we could understand that your requirement is to dynamically update the row data. You can achieve this by using the Grid’s setRowData method as demonstrated in the below code snippet, 

// button click event handler 

onClick(args) { 

      var newData = Object.assign({}, this.gridObj.dataSource[2]); 

      newData.CustomerID = "BLONP"; 

      newData.Freight = 22 + (Math.random() * 100); 

      // this.gridObj.setRowData(primary key value, data to be updated) 

      this.gridObj.setRowData(10250, newData); 

} 

 

We have prepared a sample based on this for your reference which you can find below, 

Sample: https://stackblitz.com/edit/angular-ebq8mj?file=app.component.ts 

API link: https://ej2.syncfusion.com/angular/documentation/api/grid/#setrowdata 

Similarly you can also use the updateRow method to perform this operation. 

Please get back to us if you require any further assistance. 

Regards, 

Sujith R 

[Mohamed BENNOUR]

Hi Sujith,

That's it ! We've tried and it works as we expect.

Thanks a lot, your reply and the example that you provid are clear and fix our case.

Regards.

[Sujith Kumar Rajkumar]

Hi Mohamed, 

We are glad to hear that. Please get back to us if you require any further assistance. 

Regards, 

Sujith R