Highlight cell and Update column values

[Christian DAquino]

Hi,

I have two questions which relates to changing the grid data after it has been rendered and without having to refresh the entire grid again:

#1- How do I update a particular column of the grid based on an external ajax request? The updateCell method kind of does that, but it also records that as a cell change which needs to be update/pushed to the server, and I don't want that.

2#- How do I modify the style (change color) of a particular cell on the grid also based on the information received from an ajax request after the grid has been rendered.

I'm trying to optimize the performance of my requests to the server. I have some quite large tables and not all information is required all the time by the users. So I'm trying to bring a minimum set of data once the user logs in, and then amend more columns/info to the grid as the user requests them, but without having to refresh the whole grid again.

[Mohammed Farook J]

Hi Christian , 

 

Thanks for contacting Syncfusion support. 

 

Query 1: 1- How do I update a particular column of the grid based on an external ajax request? The updateCell method kind of does that, but it also records that as a cell change which needs to be update/pushed to the server, and I don't want that. 

 

We have suspect that , you want to update the particular cell value in client side only.  We have suggest to use, ‘setCellValue’ method. The ‘setCellValue’ is updated only client and it is not affecting the Grid dataSource (but when you preforming Grid Sorting,  searching , filtering , editing , etc., based on its dataSource original value  i.e.,  if you have changed cell value by setCellValue is not  the change affected while performing the Grid action  ) Please find the documentation and code example for your reference. 

 

https://ej2.syncfusion.com/documentation/api/grid/#setcellvalue  

 

code example: 

 

grid.setCellValue(10251, 'CustomerID', 'HANAR'); 

 

 

 

Query 2: How do I modify the style (change color) of a particular cell on the grid also based on the information received from an ajax request after the grid has been rendered. 

 

Yes, you can apply the cell customized after Grid rendered by the following way. 

 

   <style> 

          .e-grid .e-rowcell.e-custom{ 

              color:red; 

            } 

        </style> 

 

 

 

function cellCustomized(e){ 

     var gridRows = grid.getRowsObject(); 

     var pkKey = grid.getPrimaryKeyFieldNames()[0]; 

     for(let i =0; i< gridRows.length; i++){ 

        

       if(gridRows[i].data[pkKey] == 10250){ 

          var colIndex = grid.getColumnByField('Freight').index; 

         grid.getRows()[i].children[colIndex].classList.add('e-custom') 

       } 

     } 

 

 

 We can find the exact row by using ‘primarykey’ column by through ‘getRowsObject()’ method and found the cell element through ‘gridRows()’ method and applied the custom class for the cell element.   

 

Please find the API documentation for your reference. 

 

https://ej2.syncfusion.com/documentation/api/grid/#getrows 

https://ej2.syncfusion.com/documentation/api/grid/#getprimarykeyfieldnames 

https://ej2.syncfusion.com/documentation/grid/how-to/grid-styling/  

 

Regards, 

J Mohammed Farook