Data Grid - Independent Cell Styles

This example demonstrates how to change the display style (CSS) of a cell, row or column. To programmatically change the css for a cell, you need to execute the command setCellStyle for the specific cell of the data grid object.

Syntax: myGrid.setCellStyle(rowNum, colNum, cssName);

In this example, seven css style is created to in rgbdemo.css. Each style is available as a selectable item in the dropdown list.

    .dax_datagrid .style1 {
        background-color: #ffff00;
    }
    .dax_datagrid .style2 {
        background-color: #ffc0cb;
    }
    .dax_datagrid .style3 {
        background-color: #00ff00;
    }
    .dax_datagrid .style4 {
        background-color: #ffa500;
    }
    .dax_datagrid .style5 {
        background-color: #0000ff;
    }
    .dax_datagrid .style6 {
        background-color: #a020f0;
    }
    .dax_datagrid .style7 {
        background-color: #ff0000;
    }

Note: This example only uses css that contains only background color. There is no restriction on what can be added to the css as long as it is a valid css attribute.

Example: Apply Cell

When a button "Apply Cell" is clicked, the fuction setCSStoCell is called. It retrieves the selected value of the dropdown (which is the name of a css style) and apply it to the current selected cell, determined by row and column number.

    function setCSStoCell (aObj){
        var cssname = aObj.options[aObj.selectedIndex].value;
        myGrid.setCellStyle(parseInt(targetrow.value), parseInt(targetcol.value), cssname);
    }

Example: Apply Row

When a button "Apply Row" is clicked, the fuction setCSStoRow is called. It retrieves the selected value of the dropdown (which is the name of a css style) and apply it to all cell in the row that the user has selected.

    function setCSStoRow (aObj) {
        var cssname = aObj.options[aObj.selectedIndex].value;
        for(var i=1;i<=7;i++){
            myGrid.setCellStyle(parseInt(targetrow.value), i, cssname);
        }
    }

Example: Apply Column

When a button "Apply Column" is clicked, the fuction setCSStoCol is called. It retrieves the selected value of the dropdown (which is the name of a css style) and apply it to all cell in the column that the user has selected.

    function setCSStoCol (aObj) {
        var cssname = aObj.options[aObj.selectedIndex].value;
        var rownum = myGrid.getParsedDataRecordCount();
        for(var i=1;i<=rownum;i++){
            myGrid.setCellStyle(i, parseInt(targetcol.value), cssname);
        }
    }