Set different background color of grid cells

I caught a strange problem when coding with dhtmlxGrid component, i want to set different background color of grid cells depending on the cell value when grid data binded, it was perfectly worked when file opened in local machine with IEexplorer, however, when file running on server side(such as websphere),it didn’t work.

here is my code and question is described inline:

var bizDatoGrid = new dhtmlXGridObject(‘businessDatoBox’);
bizDatoGrid.setHeader(“layer,frame01,frame02,frame03,frame04,frame05,frame06”);
bizDatoGrid.setColumnIds(“layer,frame01,frame02,frame03,frame04,frame05,frame06”);
bizDatoGrid.setInitWidths(“100,70,70,70,70,70,70”);
bizDatoGrid.setColAlign(“left,center,center,center,center,center,center”);
bizDatoGrid.setEditable(false);

var dhxWins = new dhtmlXWindows();
dhxWins.setImagePath("…/…/third/dhtmlx/imgs/");
dhxWins.setSkin(“dhx_blue”);
bizDatoGrid.attachEvent(“onRowSelect”, function(id,ind){
bizDatoGrid.clearSelection();
var roomid = bizDatoGrid.cells(id,ind).getValue();
if(dhxWins.window(“w1”))dhxWins.window(“w1”).close();
var w1 = dhxWins.createWindow(“w1”, 0, 0, 320, 400);
w1.setText(roomid);
w1.clearIcon();
w1.denyResize();
w1.button(“park”).hide();
w1.button(“minmax1”).hide();
w1.button(“minmax2”).hide();

var tbHtml = "<table id='popWindow'>";
tbHtml += "<tr><td align='right' width='120px'>Address:</td><td>"+roomid+"</td></tr>";
tbHtml += "<tr><td align='right' width='120px'>Name:</td><td>Jordan</td></tr>";
tbHtml += "<tr><td align='right' width='120px'>Tel:</td><td>85504020</td></tr>";
tbHtml += "</table>";
w1.attachHTMLString(tbHtml);
w1.centerOnScreen();

});
bizDatoGrid.init();
bizDatoGrid.setSkin(“dhx_building”);
bizDatoGrid.load(“xml/bizGrid.xml”,“xmlA”);
alert(bizDatoGrid.getRowsNum());//When code work on the server side(such as websphere 6.1),here we will get 0, function forEachCell below will not work when this line is commented because no data binded;Howerver, when open this html file in IEexplorer,here we will get the correct rows in file “bizGrid.xml”

bizDatoGrid.forEachRow(function(id){
bizDatoGrid.forEachCell(id,function(cellObj,ind){
if(ind>0){
cellObj.setBgColor(getItemBgColor(cellObj.getValue()));//i want to set different colors depend on cell value, but without the line “alert(bizDatoGrid.getRowsNum());” this line will not run when code running on server side
}
});
});

function getItemBgColor(v){
if(v<13){
return “#ffffff”;
}else if(v>=13&&v<16){
return “#20c0ff”;
}else if(v>=16&&v<19){
return “#ffc0ff”;
}else if(v>=19){
return “#a0ffc0”;
}
}

the content of bizGrid.xml is attached.

someone can tell me where is the problem? thanks ahead!!

In case of dynamic loading only the portion of rows loads to the client with the load() method.
So new colour will be applied only to the first portion. Please, try change the colour when the row is added to the grid using onRowCreated event:
mygrid.attachEvent(“onRowCreated”, function(id,rObj,rXml){
mygrid.forEachCell(id,function(cellObj,ind){
if(ind>0){
cellObj.setBgColor(getItemBgColor(cellObj.getValue()));//i want to set different colors depend on cell value, but without the line “alert(bizDatoGrid.getRowsNum());” this line will not run when code running on server side
}
});

});

Thanks very much! It works!!