dhtmlx grid, increase font size and row height & change head

I am using the following script and would like to change the header color to light blue, and increase the font size to make the grid more readable. Both should not be too difficult I would think.

Also, is there some docuentation on what ColTypes are?



setHeader method allows to define header cell styles in the 3rd parameter. For example:

mygrid.setHeader(“columnA, ColumnB”,false,[“color:black”,“color:black”]);


  Thanks, I tried:

mygrid.setHeader(“ColA, Col Br”,false,[“background-color:B0E2FF”,“background-color:B0E2FF”]); 



This changes the background of the header, but it does not work for the next line of the filter boxes.

Also, how can I increase the grid and font size please.




the provided solution is applied only for one header row (which is set for). So, the style for the additional header can be defined in the 2nd parameter of attachHeader method.


Also you can make modifications directly in the dhtmlxgrid.css:

to change header style (main header) you can modify the following class:

div.gridbox table.hdr td {


to change style of the grid rows - the following one:

div.gridbox table.obj td {




  The revision of the filter columns worked great!  The font size change did not.  Is there another area of the file dhtmlxgrid.css that needs to be modified?  I noticed there are a lot of fond-size entires in the .css file.


If you use some skin, changes should be done in the corresponding css class.

For example for light skin:

div.gridbox_light table.obj td {


Changes to the .css for the skins worked.  Now I just need to change the height of the boxes so the text does not overlap.  Alex, thanks for all your help so far.


   I cannot figure out how to get a clean looking grid when I increase the font size above 16, so need some way in increase the grid row height?

You can redefine row height in the following style:

div.gridbox table.row20px tr td{