3

I have the following example code (you can cut'n'paste it if you want):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" 
        djConfig="parseOnLoad:true"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />

<script>
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.Button");
    function init() {
        var lData = {
            items: [
                   {"position":"1","band":"Black Dyke","conductor":"Nick Childs"},
                   {"position":"2","band":"Carlton Main","conductor":"Philip McCann"},
                   {"position":"3","band":"Grimethorpe","conductor": "Allan Withington"},
                   {"position":"4","band":"Brighouse and Rastrick","conductor": "David King"},
                   {"position":"5","band":"Rothwell Temperance","conductor":"David Roberts"},
            ],
            identifier: "position"      
        };
        var dataStore = new dojo.data.ItemFileReadStore({data:lData});
        var grid = dijit.byId("theGrid");
        grid.setStore(dataStore);

        dojo.connect(dijit.byId("theGrid"), 'onStyleRow', this, function (row) {
            var theGrid = dijit.byId("theGrid")
            var item = theGrid.getItem(row.index);
            if(item){
                var type = dataStore.getValue(item, "band", null);
                if(type == "Rothwell Temperance"){
                    row.customStyles += "color:red;";
                }
            }
            theGrid.focus.styleRow(row);
            theGrid.edit.styleRow(row);
        });
    }
var plugins = {
    filter: {
        itemsName: 'songs',
    closeFilterbarButton: true,
    ruleCount: 8
        }
};
    dojo.ready(init);
    function filterGrid() {
        dijit.byId("theGrid").filter({band: dijit.byId('filterText').get('value')+'*'});
        console.log(dijit.byId('filterText').get('value')+'*');
    }
    function resetFilter() {
        dijit.byId("theGrid").filter({band: '*'});
        dijit.byId('filterText').set('value','');
    }
</script>
</head>
<body class="claro">
<input dojoType="dijit.form.TextBox" id="filterText" type="text" onkeyup="filterGrid()">&nbsp;&nbsp;&nbsp;
<button dojoType="dijit.form.Button" onclick="resetFilter()">Clear</button><br><br>
<table dojoType="dojox.grid.DataGrid" id="theGrid" autoHeight="auto" autoWidth="auto" plugins="plugins">
    <thead>
        <tr>
            <th field="position" width="200px">Position</th>
            <th field="band" width="200px">Band</th>
            <th field="conductor" width="200px">Conductor</th>
        </tr>
    </thead>
</table>
</body>
</html>

The onStyleRow only gets fired when I click a row. Is there any way to have a button format rows based on their content? Either by having classes assigned to rows at creation time and then change the class values or loop through the rows and directly changing the style element of each based on it's contents.

EDIT

I have also tried creating the grid programmatically. While when created this way it does fire the onStyleRow at creation time it does not provide the same level of hightlighting the other method does.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" 
        djConfig="parseOnLoad:true"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<style>
#grid {
    height: 20em;
}
</style>
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script>
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.Button");
    function init() {
        var lData = {
            items: [
                   {"position":"1","music":"Opera","band":"Black Dyke","conductor":"Nick Childs"},
                   {"position":"2","music":"Opera","band":"Carlton Main","conductor":"Philip McCann"},
                   {"position":"3","music":"Classical","band":"Grimethorpe","conductor": "Allan Withington"},
                   {"position":"4","music":"Classical","band":"Brighouse and Rastrick","conductor": "David King"},
                   {"position":"5","music":"Opera","band":"Rothwell Temperance","conductor":"David Roberts"},
            ],
            identifier: "position"      
        };
        var dataStore = new dojo.data.ItemFileReadStore({data:lData});
        var layout = [[
            {'name':'Position','field':'position','width':'50px'},
            {'name':'Music Type','field':'music','width':'150px'},
            {'name':'Band','field':'band','width':'200px'},
            {'name':'Conductor','field':'conductor','width':'200px'}
        ]];
        var grid = new dojox.grid.DataGrid({
            id: 'grid',
            store: dataStore,
            structure: layout,
            rowSelector: false,
            selectionMode: 'extended',
            onStyleRow: function(row) {
                var item = this.getItem(row.index);
                if(item){
                    var type = this.store.getValue(item, "band", null);
                    if(type == "Rothwell Temperance"){
                        row.customStyles += "color:red;";
                    }
                }
            }
        });
        grid.placeAt("gridDiv");
        grid.startup();
    }
    var plugins = {
        filter: {
            itemsName: 'songs',
            closeFilterbarButton: true,
            ruleCount: 8
        }
    };
    dojo.ready(init);
    function filterGrid() {
        dijit.byId("grid").filter({band: dijit.byId('filterText').get('value')+'*'});
        console.log(dijit.byId('filterText').get('value')+'*');
    }
    function resetFilter() {
        dijit.byId("grid").filter({band: '*'});
        dijit.byId('filterText').set('value','');
    }
</script>
</head>
<body class="claro">
<input dojoType="dijit.form.TextBox" id="filterText" type="text" onkeyup="filterGrid()">&nbsp;&nbsp;&nbsp;
<button dojoType="dijit.form.Button" onclick="resetFilter()">Clear</button><br><br>
<div id="gridDiv"></div>
</body>
</html>

Method 1 (doesn't format when grid is created, nice highlighting) enter image description here

Method 2 (formats when grid created, no row highlighting) enter image description here

2 Answers 2

Reset to default
4

A simple re-ordering of the init() function makes sure the onStyleRow function is bound before the data is added to the grid works.

function init() {
    var lData = {
        items: [
               {"position":"1","band":"Black Dyke","conductor":"Nick Childs"},
               {"position":"2","band":"Carlton Main","conductor":"Philip McCann"},
               {"position":"3","band":"Grimethorpe","conductor": "Allan Withington"},
               {"position":"4","band":"Brighouse and Rastrick","conductor": "David King"},
               {"position":"5","band":"Rothwell Temperance","conductor":"David Roberts"},
        ],
        identifier: "position"      
    };
    var dataStore = new dojo.data.ItemFileReadStore({data:lData});
    var grid = dijit.byId("theGrid");
    dojo.connect(grid, 'onStyleRow', this, function (row) {
        var item = grid.getItem(row.index);
        if(item){
            var type = dataStore.getValue(item, "band", null);
            if(type == "Rothwell Temperance"){
                row.customStyles += "color:red;";
                //row.customClasses += " dismissed";
            }
        }
        //theGrid.focus.styleRow(row);
        //theGrid.edit.styleRow(row);
    });
    grid.setStore(dataStore);
}
2
+50

Have you tried any of the following:

Style Dojox Grid Row depending on data

dojox DataGrid onStyleRow works first time, then not again

dojox.grid.DataGrid - onStyleRow needs update? (dojo 1.2.0)

You can also use Firebug to see if rows are getting assigned an ID and then change background of each row using onStyleRow.

3
  • All of the above recommend using dojo.connect (Which I use above). The only problem is it does not fire the function when it first draws the grid. It only runs when the mouse hovers over various rows or the sort order is changed when the column headings are clicked, i.e. when it redraws. Is there any way I can fire this function when the page first loads
    – Robert Johnstone
    Commented Oct 15, 2012 at 12:14
  • Have you tried adding an alert() or console.log() in onStyleRow being invoked in that way. Last time I tried, it even got fired during initial rendering.
    – Piyush-Ask Any Difference
    Commented Oct 15, 2012 at 16:03
  • refer to my answer. It turned out to be where I was placing the dojo.connect in the startup script
    – Robert Johnstone
    Commented Oct 15, 2012 at 16:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.