Styling Grid's Elements

You can use CSS for dhtmlxGrid to achieve the desired look-and-feel. This article will help you to discover the support for cascading style sheets (CSS) in Grid.

You can adjust the style of:

A whole grid

To apply some style to a whole table, we recommend you to use a special tool - Skin builder. It will allow you to style the grid on the fly and see the result immediately .

All the details are given at https://dhtmlx.com/docs/products/skinBuilder/index.shtml

Also, you can use the setStyle method to set the style of main grid's aspects: header, cells, selected cell, selected row.

//grid.setStyle(ss_header, ss_grid, ss_selCell, ss_selRow);
grid.setStyle(
    "background-color:navy;color:white; font-weight:bold;", "","color:red;", ""
);

Column

To apply custom colors to grid's columns, use the setColumnColor method:

//set colors for the first 3 columns
mygrid.setColumnColor("white,#d5f1ff,#d5f1ff");

Related sample: Multirow header

Row

To apply a custom style to a row of the grid use the setRowTextStyle method:

//sets the style for the row with id="row1"
mygrid.setRowTextStyle("row1", "background-color: red; font-family: arial;");

Related sample: Using Grid API Methods

One more way to set a custom color to a grid's row is to use the setRowColor method:

//sets the 'red' color to the row with id="row1"
mygrid.setRowColor("row1","red");

There are also 2 methods that will allow you quickly set the bold and normal font weight for the row's text:

mygrid.setRowTextBold("row1");
mygrid.setRowTextNormal("row2");

Related sample: Using Grid API Methods

Cell

To apply a custom style to a cell of the grid use the setCellTextStyle method:

mygrid.attachEvent("onValidationError",function(id,ind,value){
    mygrid.setCellTextStyle(id,ind,"font-weight:bold;");     document.getElementById('message').innerHTML="Error at cell ("+id+","+ind
    +"), value must "+(ind==0?"not be empty":"be a valid email");
    return false;
})

Related sample: Basic custom validation

Header

To style the header of the grid use the 3rd parameter of the setHeader (or attachHeader) method:

mygrid.setHeader(
    "A,B,C",
    null,
    ["text-align:right;","text-align:left;","text-align:center"]
);
mygrid.attachHeader("A,B,C,D",["","color:red;","",""]);

Also you can use the 1st parameter of the setStyle method:

//grid.setStyle(ss_header, ss_grid, ss_selCell, ss_selRow);
grid.setStyle("background-color:navy;color:white; font-weight:bold;", "","", "");

Styling even/odd grid rows

To provide different styles for the even and odd rows of the grid use the enableAlterCss method:

<style>.even{
    background-color:#22FF44;
}
.uneven{
    background-color:#41964e;
}
</style>

mygrid.enableAlterCss("even","uneven");