Grid styling : Rows

The DataGrid provides extension points which allows you to apply custom css classes or styles to a row, depending on different parameters. To use it, you just have to override default behavior by yours.

<script type=../../../../dojox/grid/docs_subdomain/_quot.css;text/javascript../../../../dojox/grid/docs_subdomain/_quot.css;>
    dojo.require(../../../../dojox/grid/docs_subdomain/_quot.css;dojox.grid.DataGrid../../../../dojox/grid/docs_subdomain/_quot.css;);
    dojo.require(../../../../dojox/grid/docs_subdomain/_quot.css;dojo.data.ItemFileWriteStore../../../../dojox/grid/docs_subdomain/_quot.css;);
</script>
<span dojoType=../../../../dojox/grid/docs_subdomain/_quot.css;dojo.data.ItemFileWriteStore../../../../dojox/grid/docs_subdomain/_quot.css;
    jsId=../../../../dojox/grid/docs_subdomain/_quot.css;store3../../../../dojox/grid/docs_subdomain/_quot.css; url=../../../../dojox/grid/docs_subdomain/_quot.css;http://docs.dojocampus.org/moin_static163/js/dojo/trunk/dijit/tests/_data/countries.json../../../../dojox/grid/docs_subdomain/_quot.css;>
</span>
<table dojoType=../../../../dojox/grid/docs_subdomain/_quot.css;dojox.grid.DataGrid../../../../dojox/grid/docs_subdomain/_quot.css;
    jsId=../../../../dojox/grid/docs_subdomain/_quot.css;grid6../../../../dojox/grid/docs_subdomain/_quot.css;
    store=../../../../dojox/grid/docs_subdomain/_quot.css;store3../../../../dojox/grid/docs_subdomain/_quot.css;
    query=../../../../dojox/grid/docs_subdomain/_quot.css;{ name: '*' }../../../../dojox/grid/docs_subdomain/_quot.css;
    rowsPerPage=../../../../dojox/grid/docs_subdomain/_quot.css;20../../../../dojox/grid/docs_subdomain/_quot.css;
    clientSort=../../../../dojox/grid/docs_subdomain/_quot.css;true../../../../dojox/grid/docs_subdomain/_quot.css;
    style=../../../../dojox/grid/docs_subdomain/_quot.css;width: 400px; height: 200px;../../../../dojox/grid/docs_subdomain/_quot.css;
    rowSelector=../../../../dojox/grid/docs_subdomain/_quot.css;20px../../../../dojox/grid/docs_subdomain/_quot.css;>
    <script type=../../../../dojox/grid/docs_subdomain/_quot.css;dojo/method../../../../dojox/grid/docs_subdomain/_quot.css; event=../../../../dojox/grid/docs_subdomain/_quot.css;onStyleRow../../../../dojox/grid/docs_subdomain/_quot.css; args=../../../../dojox/grid/docs_subdomain/_quot.css;row../../../../dojox/grid/docs_subdomain/_quot.css;>
         //The row object has 4 parameters, and you can set two others to provide your own styling
         //These parameters are :
         // -- index : the row index
         // -- selected: wether the row is selected
         // -- over : wether the mouse is over this row
         // -- odd : wether this row index is odd.
         var item = grid6.getItem(row.index);
         if(item){
            var type = store3.getValue(item,../../../../dojox/grid/docs_subdomain/_quot.css;type../../../../dojox/grid/docs_subdomain/_quot.css;,null);
            if(type == ../../../../dojox/grid/docs_subdomain/_quot.css;continent../../../../dojox/grid/docs_subdomain/_quot.css;){
                row.customStyles += ../../../../dojox/grid/docs_subdomain/_quot.css;color:red;../../../../dojox/grid/docs_subdomain/_quot.css;;
            }
         }
         grid6.focus.styleRow(row);
         grid6.edit.styleRow(row);
    </script>
    <thead>
        <tr>
            <th width=../../../../dojox/grid/docs_subdomain/_quot.css;200px../../../../dojox/grid/docs_subdomain/_quot.css;
                field=../../../../dojox/grid/docs_subdomain/_quot.css;name../../../../dojox/grid/docs_subdomain/_quot.css;>Country/Continent Name</th>
            <th width=../../../../dojox/grid/docs_subdomain/_quot.css;auto../../../../dojox/grid/docs_subdomain/_quot.css;
                field=../../../../dojox/grid/docs_subdomain/_quot.css;type../../../../dojox/grid/docs_subdomain/_quot.css;
                cellType=../../../../dojox/grid/docs_subdomain/_quot.css;dojox.grid.cells.Select../../../../dojox/grid/docs_subdomain/_quot.css;
                options=../../../../dojox/grid/docs_subdomain/_quot.css;country,city,continent../../../../dojox/grid/docs_subdomain/_quot.css;
                editable=../../../../dojox/grid/docs_subdomain/_quot.css;true../../../../dojox/grid/docs_subdomain/_quot.css;>Type</th>
        </tr>
    </thead>
</table>
<style type=../../../../dojox/grid/docs_subdomain/_quot.css;text/css../../../../dojox/grid/docs_subdomain/_quot.css;>
    @import ../../../../dojox/grid/docs_subdomain/_quot.css;/moin_static163/js/dojo/trunk/dojox/grid/resources/Grid.css../../../../dojox/grid/docs_subdomain/_quot.css;;
    @import ../../../../dojox/grid/docs_subdomain/_quot.css;/moin_static163/js/dojo/trunk/dojox/grid/resources/nihiloGrid.css../../../../dojox/grid/docs_subdomain/_quot.css;;
    .dojoxGrid table {
        margin: 0;
    }
</style>

dojox/grid/example_grid_styling_rows (last edited 2009-01-06 23:54:15 by kolban)