2

Is it possible to style the selected row of a Datagrid programmatically?

Can anyone give a snippet ?

Redg
  • 399
  • 1
  • 6
  • 16

3 Answers3

1

Try this (here's a fiddle with modified reference guide example):

var grid = new dojox.grid.DataGrid({
    id: 'grid',
    store: store,
    structure: layout,
    rowSelector: '20px',
    onClick: function() {
        // ( selection.selected is array for multiple)
        var index = this.selection.selectedIndex,
        // typically 1 here, mess with it if nogo on solution
        viewindex = 1,
        RAWROWNODE = this.views.views[viewindex].rowNodes[index]

    }
}, document.createElement('div'));

You can also look into the stylesheet, used by grid component.

.dojoxGridRow,
.dojoxGridRowOdd,
.dojoxGridRowSelected {
}
mschr
  • 8,531
  • 3
  • 21
  • 35
  • Indeed the solution was to override the css the grid was using. To be more specific I use the claro theme and the claroGrid.css and I inside that I changed it: For the Selected Row: .claro .dojoxGridRowSelected .dojoxGridRowTable tr td[style] { background-color:#cee6fa !important; } For the Over Row: .claro .dojoxGridRowOver .dojoxGridCell { background:url("images/row_back.png") #ABD6FF repeat-x !important; border-top:1px solid #769DC0; border-bottom:1px solid #769DC0; } – Redg Jun 26 '12 at 14:25
0

Why not simply overriding the right css class? Otherwise you might want to look at onStyleRow and styleRowState function

PEM
  • 1,948
  • 14
  • 13
0

Try this 

 dojo.connect(grid, 'onStyleRow', this, function (row) {
    if (grid.selection.selectedIndex == row.index) {
       row.customStyles += "color: red;";            
    }

    grid.focus.styleRow(row);
    grid.edit.styleRow(row);
});
Azadeh Radkianpour
  • 961
  • 9
  • 18