Check documentation for the latest version of dhtmlxSuite Styling Grid's Elements DHTMLX Docs

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

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);
    "background-color:navy;color:white; font-weight:bold;", "","color:red;", ""


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

//set colors for the first 3 columns

Related sample:  Multirow header


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"

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


Related sample:  Using Grid API Methods


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

    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


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


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:


Related sample:  Alternative styles for even/uneven rows

Back to top