Opened 9 years ago

Closed 6 years ago

#10620 closed defect (patchwelcome)

dojox.DataGrid onRowStyle render problem

Reported by: delf Owned by: Evan
Priority: high Milestone: future
Component: DojoX Grid Version: 1.4.0
Keywords: DataGrid, onRowStyle, customStyles Cc:
Blocked By: Blocking:


I use dojox.grid.DataGrid? for display emails in inbox. I got boolean flag isNew to mark unreaded emails, what I display with orange background-color for the isNew rows, implemented by inheriting Grids onStyleRow function with something like this:

onStyleRow : function( inRow ) {
  var store =;
  var item = store._arrayOfAllItems[ inRow.index ];
  if( !inRow.selected ) {
    var isNew = item.isNew[ 0 ];
    if( isNew == true ) {
      inRow.customStyles += "background-color : #FFAA55;";
  this.inherited( arguments );

When I click on the isNew row, I set the isNew flag of the ItemFileWriteStore? item to false to remove orange background color of the selected item with this code:

dojo.connect( grid, "onRowClick", fetchMessage );


function fetchMessage( gridRow ) {
  var rowIndex = gridRow.rowIndex;
  var emailItem = grid.getItem( rowIndex );
  store.setValue( emailItem, "isNew", false );

But it do not work correctly. I found, that this sample of code work only with a bit of items in Store. For example, when I got 1 isNew and 4 others, code works correctly. When I got 1 isNew and 5 others (or more), the code do not work and the selected "isNew" row is still orange after deselecting, even if the program miss the if statement to add custom style.
There is one other suggest. If I resize any column of the DataGrid?, everything works perfectly after repainting the DataGrid?.
So bug?

Attachments (1) (1.9 KB) - added by delf 9 years ago.
Demo code

Download all attachments as: .zip

Change History (10)

Changed 9 years ago by delf

Attachment: added

Demo code

comment:1 Changed 9 years ago by Goran Miskovic

I am using the same idea in a different context. It works fine for me. Although I did it slightly different. :)

In my understanding, onSyleRow is a event and not a method. One should hook to it and not override it. I am extended dojox.grid.EnhancedGrid? but that should not make any difference. Further on in your store definition isNew item property type is Boolean and not Array and it appears that

isNew = item.isNew[0]

needs to be changed to

isNew = item.isNew

in order to make it work correctly.

dojo.provide( "my.OrangeDataGrid" );

dojo.require( "dojox.grid.DataGrid" );

dojo.declare( "my.OrangeDataGrid",
  dojox.grid.DataGrid, {
     styleSelectedRows: function(inRow) {
      var item = this.getItem(inRow.index);

      if((typeof(item) !== "undefined") && !inRow.selected && (true == item.isNew)) {
          inRow.customStyles += "background-color: #FFAA55;";

dojo.addOnLoad(function() {
    var myOrangeGrid = dijit.byId("whateverIsIdOfOrangeGrid");
    dojo.connect(myOrangeGrid, "onStyleRow", myOrangeGrid, "styleFetauredRows");

You might try adding connection to postCreate.

postCreate: function(){
    this.inherited(arguments); //might not be needed 
    dojo.connect(this, "onStyleRow", this, "styleFetauredRows");
// or maybe    this.connect(this, "onStyleRow", "styleFetauredRows");

Finally, since users will click on read messages as well you might consider changing function fetchMessage to:

fetchMessage: function(gridRow) {
  var emailItem = this.getItem(gridRow.rowIndex);
  if (true == emailItem.isNew) {, "isNew", false);

and adding it to my.OrangeDataGrid? definition.

comment:2 Changed 9 years ago by delf

Hi schkovich,
really thank you for your support! Connecting to onStyleRow works perfectly instead of overriding it.
And I don't what am I doing wrong, but all store item properties are the array of one item for me. So I need to index this first array item to get the property value. That's why I'm using


Just check my Firebug variable watch:

comment:3 Changed 9 years ago by Goran Miskovic

In store.json provided data are structured as defined in SMD. It looks as if the problem is on the server side. If you using PHP/SQL on the server side I might be able to help.

comment:4 Changed 9 years ago by Karl Tiedt

This appears to be a 'no defect' ?

comment:5 Changed 9 years ago by Nathan Toone

Owner: Nathan Toone deleted

Unassigning my tickets.

comment:6 Changed 8 years ago by evan

Milestone: tbdfuture
Owner: set to evan

comment:7 Changed 8 years ago by Evan

Owner: changed from evan to Evan

comment:8 Changed 6 years ago by bill

DojoX Grid and EnhancedGrid are deprecated in favor of dgrid and gridx.

You should upgrade your code to use one of those two grids.

We will consider patches to the old DojoX Grid code though.

comment:9 Changed 6 years ago by bill

Resolution: patchwelcome
Status: newclosed
Note: See TracTickets for help on using tickets.