JQgrid how do I change background color of row based on server data?

Question

I'm trying to change the background color of multiple rows based on data returned from a SQL query. I'm using JSON as my data type and have tried using loadComplete to iterate through the grid and color the rows by adding a css class after the grid is loaded. This works but I have 1000's of rows returned and this method greatly slows down the loading of the grid. The user has to wait a long time before the grid is finally loaded.

I haven't tried using a customer formatter to color the rows because I'm told the grid will not be available yet when the customer formatter is triggered so there would be an error? I have seen documentation on setting a timeout period so the grid is available in the DOM for the customer formatter but this sounds like it would slow the loading of the grid which is what I'm trying to avoid.

Ideally I would like to assign a class to the row during the server call (PHP) based on table data and then when the grid is loaded on the client side it colors the row based on a css style. It seems that assigning a class on the server side would be the most efficient way so I don't have to cycle through the data more than once or draw the grid more than once? What other techniques are available for doing this? Thanks!

Answer 1

The best way to do what you want is to use rowattr. I described in the answer exactly what you need. In more old versions you will have to iterate like it's described in more old answer and set class to some rows.

The most important to understand that every change of one elements on the page follows to recalculating of position of all other elements existing on the page. The minimum what need be done is reflow (see here). In case of usage gridview: true option of jqGrid all rows of the grid body will be created as string first and then will be placed on the page with one operation (something like assign innerHTML property). It improve the performance dramatically in case of usage large number of rows without paging. If you use custom formatter, cellattr or rowattr you can customize default process of building of grid body without any performance disadvantages.

The usage of custom formatter is correct in general, but the problem that you have to defines formatter for every column. Moreover if you want use many columns of different types (checkboxes, numbers, currency) the usage of custom formatter is not good, because you will have to implement one more time all the formatters or call predefined formatters from the custom formattres, which make much unneeded code.

The usage of cellattr is better (see here, here or here) but you will be have to set class attribute of all cells (columns) instead of just setting the class attribute only of the rows (<tr>).

So I find the best to use rowattr like I suggested at the beginning of my answer. In the answer you will find exactly what you need.