dojox.DataGrid onRowStyle render problem

[delf]

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 = this.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?

[delf]

Demo code

[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) {
    this.store.setValue(emailItem, "isNew", false);
  }
}

and adding it to my.OrangeDataGrid? definition.

[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

item.isNew[0]

Just check my Firebug variable watch:

[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.

[Karl Tiedt]

This appears to be a 'no defect' ?

[Nathan Toone]

Unassigning my tickets.

[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.