I’m working with dhtmlxGrid.
How can I dynamically change the cell background color depending on the value of the cell? What file do I need to update and what code?
The color of the cell-background should be able to change if the value of the cell is changed.
Example: If the cell value = “X” make the background-color green, if it’s = “Y” make the background-color yellow…
Thanks
To change dynamically cell’s background you can use method setCellTextStyle(row_id, ind, styleString) where row_id - row id, ind - cell index, styleString - style string in common format (exmpl: “color:red;border:1px solid gray;”). You should call this method only after grid was fully loaded:
mygrid.loadXML(“grid.xml”,function(){
mygrid.forEachRow(function(id){
if (mygrid.cellById(id,INDEX).getValue()==“X”) mygrid.setCellTextStyle(id,INDEX,“background-color: green”);
else if (mygrid.cellById(id,INDEX).getValue()==“Y”) mygrid.setCellTextStyle(id,INDEX,“background-color: yellow”);
});
Note that if you have a lot of rows in your grid executing such code can decrease grid’s perfomance. The better way to change cell’s background dymamically - implement custom eXcell type. Please see more information here dhtmlx.com/docs/products/dht … #grid_cexc
})
How do I make a custom eXcell type? Is there documentation on it? How do I make it work?
Creating a custom eXcell type sounds better, so I can I can dynamically change the cell background color depending on the value of the cell. I’ve got a lot of rows and don’t want to create more slowness.
Thanks
I’ve been looking at the documentation that you recommended, but am unable to fully understand all that is required to get this to work.
I’ve attempted to create my own eXcell. (I doubt it works, but I’m not sure how to test it.)
function eXcell_colorcells(cell){ //excell name is defined here
if (cell){ //default pattern, just copy it
this.cell = cell;
this.grid = this.cell.parentNode.grid;
eXcell_ed.call(this); //use methods of “ed” excell
}
this.setValue=function(val){
this.setCValue("",val);
}
this.getValue=function(){
return this.cell.firstChild.value; // get button label
}
if (mygrid.cellById(id,INDEX).getValue()==“X”) mygrid.setCellTextStyle(id,INDEX,“background-color: green”);
else if (mygrid.cellById(id,INDEX).getValue()==“Y”) mygrid.setCellTextStyle(id,INDEX,“background-color: yellow”);
}
eXcell_button.prototype = new eXcell; // nest all other methods from base class
});
How do I call my new custom eXcell and where do I call it from?
I saved my custom eXcell file with the other default ones. I’ve added to my main grid page.
Do I add something after the loading of the grid, on mygrid.js?
var mygrid = new dhtmlXGridObject(‘products_grid’);
mygrid.setImagePath(“codebase/imgs/”); //specifies the path to the folder with grid images
mygrid.setNoHeader(true); //Hide the header?
mygrid.setHeader(“A,B,C,D,E,F,G,H,J,K,L,M,N,O,P,Q,R”); //set column header labels (count must = mygrid.setInitWidths count) (17 = 17)
mygrid.setInitWidths(“120,80,130,20,20,20,20,20,20,20,20,20,20,20,20,20,20”); //set column width in pixels (* - means set size to possible value) (17 = 17)
mygrid.setSkin(“clear”); //native, gray, xp , mt , modern, light, clear
mygrid.preventIECaching(true);
mygrid.enableEditEvents(true); //enable/disable events which fire excell editing, mutual exclusive with enableLightMouseNavigation
mygrid.init();
mygrid.loadXML(“getGridRecords.asp”); //load grid data from XML
myDataProcessor = new dataProcessor(“updateGridRecords.asp”);
myDataProcessor.enableDataNames(false); //named field for data syncing, will use column ids for grid
myDataProcessor._changed = true; //send data only from updated column
myDataProcessor.setUpdateMode(“cell”); //available values: cell (default), row, off
myDataProcessor.defineAction(“error”,myErrorHandler); //set error handler (handler for action with type “error”)
myDataProcessor.setTransactionMode(“POST”); //specify transaction method - POST or GET (default is GET)
myDataProcessor.init(mygrid); //initialize data processor for the grid object (in our case - mygrid)
myDataProcessor.setOnAfterUpdate(function(){
if(myDataProcessor.getSyncState()){
var dropdowntext = (document.form1.select.options[document.form1.select.options.selectedIndex].text);
if (dropdowntext = ‘All’) {dropdowntext =’’}
mygrid.clearAll();
mygrid.loadXML(‘getGridRecords.asp?loc=’+dropdowntext);
}});
You custom excell should looks like that:
function eXcell_colorcells(cell){
if (cell){
this.cell = cell;
this.grid = this.cell.parentNode.grid;
eXcell_ed.call(this);
}
this.setValue=function(val){
this.setCValue(val);
if (val==“X”) this.cell.style.backgroundColor=“green”;
else if (val==“Y”) this.cell.style.backgroundColor=“yellow”;
}
this.getValue=function(){
if (this.cell._clearCell)
return “”;
return this.cell.innerHTML.toString()._dhx_trim();
}
}
eXcell_colorcells.prototype = new eXcell;
You should put this declaration into your page (in the header or in the attached file). Now you can use “colorcells” as cell’s type:
mygrid.setColTypes(“ro,txt,colorcells,ed,ch,ro,ro,ro,ro,ro”);
or in xml:
<column type=“colorcells” … >Column label
I did what you said and it work right off the bat w/o issues. Thank you for you continued assistance.
Hi,
Thanks for the solution, but I want to apply the color for different columns in the same row or to apply the color to entire row. Could you please suggest me ?
Hello
>> but I want to apply the color for different columns in the same row or to apply the color to entire row.
You can use the following approach to set color for a certain cell:
…
or
grid.setCellTextStyle(rowId,columnIndex,“color:red”)
The same approach is possible for a row: … and grid.setRowTextStyle(rowId,“color:red”);