1

I am changing the background color of cells using setcell option in grid complete. I have successfully changed the background color as I wanted, but the time taken to load data is faster compared to the changing the color. It takes longer time, some time browser get crashed due to the huge data.

I am wondering is there any way to change background color of cell from server side response(JSON format)?

gridComplete: function()
{
var rows = $("#tableid").getDataIDs(); 
var ref={};
for (var i=0;i<rows.length;i=i+1){
if(i==2){
rowData=jQuery("#tableid").getRowData(rows[2]);
var count= Object.keys(rowData).length;
for(var j=1;j<=count;j++){ ref[j]=rowData['r'+j];}
$("#tableid").jqGrid('setRowData',rows[2],false,color:'white',weightfont:'bold',background:'green' });}
if(i>2){
rowData=jQuery("#tableid").getRowData(rows[i]); 
for(var j=1;j<=count;j++){
 if(rowData['r'+j]==ref[j]){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,''{color:'white',weightfont:'bold',background:'green'}); }
else if(rowData['r'+j]=='-'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'white'}); } 
else if(rowData['r'+j]== 'R'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'yellow'});
 } 
else if(rowData['r'+j]== 'M'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'yellow'});
} 
else if(rowData['r'+j]== 'Y'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'yellow'});
} 
else if(rowData['r'+j]== 'S'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'yellow'});
} 
else if(rowData['r'+j]== 'K'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'yellow'});} 
else {
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'red'}); } 
}
}
} },
Dadu
  • 89
  • 3
  • 14

2 Answers2

1

First of all I'd recommend you to read the answer which describe the meaning of gridview: true option. It's very important to understand that changing of one element on the page can follow to recalculation of properties (position for example) of other elements on the page. So one should reduce the number of changes on the page. Calls of setCell in the loop inside of gridComplete makes the error. In case of having n rows in the grid such code have n*n complexity. So The code can be really slow.

The next common advice: you should prefer the usage of loadComplete instead of gridComplete. The callback gridComplete should be used mostly to change information on the pager after adding/removing rows in the grid. See the answer for more details.

What you really should do is using cellattr callback in the column which background should be changed. The callback will be called during building the cells of the column. In case of usage gridview: true option jqGrid collect all content of the grid body and place it on the page as one operations. So you will have practically the same performance of filling the grid like if you would remove the code which set background color. You can find examples of the usage cellattr callback in the answer, this one (or this one), this one and other. You can define CSS classes for different background colors (background or both background-color and background-image: none) and assign the classes to the cell inside of cellattr callback. Alternatively you can assign inline style with the corresponding properties.

In any way you should verify that you use gridview: true option in the grid to have better performance.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
0

You can use cell formater(custom)

In definition of jqGrid in colModel for your special column, set formatter (a function).

function formatRating(cellValue, options, rowObject) {

   var color = (parseInt(cellValue) > 0) ? "green" : "red"; 

   var cellHtml = "<span style='color:" + color + "' originalValue='" + cellValue + "'>" + cellValue + "</span>";

   return cellHtml;
   }

For more detail visit: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter

Or check demo: http://www.guriddo.net/demo/guriddojs/functionality/formatters_custom/index.html

Iman
  • 459
  • 4
  • 19