Start Building Professional
Web Apps Today

Dynamically change the cell background color depending on the value of the cell

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

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

Please see more information here http://www.dhtmlx.com/docs/products/dhtmlxGrid/doc/articles/Custom_excell_creation.html#grid_cexc

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("<input type='button' value='"+val+"'>",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 <script src="codebase/excells/dhtmlxgrid_excell_colorcells.js"></script> 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);
    }});

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 ?http://www.dhtmlx.com/docs/products/kb/imgs/_button_post_answer.gif" width=99>