Setting Grid styles

Setting Grid styles

There are two ways to set grid styles:

using modified style sheet

changing parameters on the fly using script methods. In dhtmlxGrid you are allowed to use setCellTextStyle, setRowTextStyle and setStyle methods.

Styles:

row_id - row id
ind - cell index
styleString - style string in common format (exmpl: "color:red;border:1px solid gray;")

row_id - row id
styleString - style string in common format (exmpl: "color:red;border:1px solid gray;")

ss_header - style def. expression for header
ss_grid - style def. expression for grid cells
ss_selCell - style def. expression for selected cell
ss_selRow - style def. expression for selected Row

Source

<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<link rel="STYLESHEET" type="text/css" href="../common/images/dhtmlxgrid_m1.css">
<link rel="STYLESHEET" type="text/css" href="../common/images/dhtmlxgrid_m2.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>        
<script  src="../../codebase/dhtmlxgridcell.js"></script>    
 
 
 
<table width="600">
    <tr>
        <td>
            <div id="box0">
                <div id="gridbox" style="width:100%;height:270px;background-color:white;"></div>
            </div>
            <div id="box1"></div>
            <div id="box2"></div>
        </td>
    </tr>
    <tr>
        <td>Styles:<br>
            <li><a href="javascript:void(0)" onClick="mygrid.attachToObject(document.getElementById('box0'));mygrid.setSizes()">Default Style</a></li>
            <li><a href="javascript:void(0)" onClick="mygrid.attachToObject(document.getElementById('box1'));mygrid.setSizes()">M1 Style</a></li>
            <li><a href="javascript:void(0)" onClick="mygrid.attachToObject(document.getElementById('box2'));mygrid.setSizes()">M2 Style</a></li>
        </td>
    </tr>
</table>
<br>
 
 <ul>
   Parameters passed to the constructor for setCellTextStyle method are the following:
   <li> row_id - row id</li>
 <li>ind - cell index</li>
 <li>styleString - style string in common format (exmpl: &quot;color:red;border:1px solid gray;&quot;) </li>
 </ul>
 <ul>
   Parameters you should specify in setRowTextStyle method are:
   <li>row_id - row id</li>
 <li>styleString - style string in common format (exmpl: &quot;color:red;border:1px solid gray;&quot;)</li>
 </ul>
 <ul>Parameters for the last method are the following:
 <li>ss_header - style def. expression for header</li>
 <li>ss_grid - style def. expression for grid cells</li>
 <li>ss_selCell - style def. expression for selected cell</li>
 <li>ss_selRow - style def. expression for selected Row</li>
 </ul>
 <script>mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Column A, Column B");
mygrid.setInitWidths("100,*");
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/grid.xml");</script>