Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by mahesh on Nov 09, 2009 21:09
open dhtmlx forum
dhtmlx grid, increase font size and row height & change header color, and column type definitions

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?

thanks,

<script>
    mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
    mygrid.setImagePath("../common/imgs/");
    mygrid.setHeader("columnA, ColumnB");
    mygrid.attachHeader("#connector_text_filter,#connector_text_filter")
    mygrid.setInitWidths("500,*")
    mygrid.setColTypes("edtxt,ed");
    mygrid.setColSorting("connector,connector")
    mygrid.enableSmartRendering(true)
    mygrid.enableMultiselect(true)
    mygrid.init();
    mygrid.loadXML("phone_connector.php");
    var dp = new dataProcessor("phone_connector.php");
    dp.init(mygrid);
</script>
Answer posted by Alex (support) on Nov 10, 2009 02:27

Hello,

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

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

Answer posted by mahesh on Nov 10, 2009 08:19

Alex,

  Thanks, I tried:

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

 mygrid.attachHeader("#connector_text_filter,#connector_text_filter")
      

 

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.

 

thanks,

  -Mahesh

Answer posted by Alex (support) on Nov 10, 2009 08:47

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. 

mygrid.attachHeader("#connector_text_filter,#connector_text_filter",["background-color:B0E2FF","background-color:B0E2FF"]);

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 {
 font-family:arial;
 font-size:12px;
 ...
}

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

div.gridbox table.obj td {
...
 font-family:Arial;
 font-size:12px;
  ...
 }


Answer posted by mahesh on Nov 10, 2009 14:30

Alex,

  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.

 

Answer posted by Alex (support) on Nov 11, 2009 02:26

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 {

...

}

Answer posted by mahesh on Nov 11, 2009 14:44
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.
Answer posted by mahesh on Nov 13, 2009 09:04

Alex,

   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?

Answer posted by Alex (support) on Nov 16, 2009 05:53

You can redefine row height in the following style:

div.gridbox table.row20px tr td{

  height:20px;
}

Answer posted by mahesh on Nov 17, 2009 09:03
thanks!