Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Brian Huisman on Apr 16, 2009 13:43
open dhtmlx forum
enableSmartRendering + column filter = loss of styles set with setRowTextStyle

We have a dhtmlxgrid table with several columns. In our particular setup, after the table is built, a select number of rows have their background colour and font colours changed using the setRowTextStyle() method. This works as-is quite well.

When we enable SmartRendering, it still works very well. New table rows are scrolled into view with the proper background and text colour styles.

The problem happens when column filtering. When we filter the grid in this fashion, and the rows collapse to a filtered state, all of the rows which weren't previously rendered - due to the smartrendering - do not have any of the setRowTextStyle rules applied to them. Even when we remove the filter and scroll down, those rows continue to be rendered without the additional styles.

Is there a workaround for this? Or will the grid .js need to be updated? We are using v.2.1 build 90316 of the dhtmlxgrid.js

Thanks,
Brian
Answer posted by dhxSupport on Apr 17, 2009 01:28

setRowTextStyle method applies only for the rows which was rendered to the client side. This method cannot style rows which wasn't loaded from the server side yet. In case of dynamic smart rendering mode better to apply style to the row via xml ("class" or "style" <row> attribute):

<row style="background-colr: red; font-weight: bold;">...</row>

Answer posted by Brian Huisman on Apr 17, 2009 07:38

That's just the thing, we are not loading anything from the server side.  The table is filled with thousands of rows using a jsarray; all the data already exists on the client side, we only use smart rendering so that the table doesn't hang until all the rows are inserted.

We are wondering why the setRowTextStyle works when the table is unfiltered and new smartrendered rows are made visible, but when the table is filtered and smart rendered, the newly rendered rows are unstyled.  No new data is requested from the server for this, the table already has all the rows inserted via loadData(data, "jsarray").

Answer posted by dhxSupport on Apr 17, 2009 09:05

Are you using forEachRow iterator to set row's text style? This method doesn't take rows which wasn't rendered to the visible area if enableSmartRendering(true). To iterate through all rows in case of static smart rendering better to use "for" operator:

for (var i=0; i<mygrid.getRowsNum(); i++){
  mygrid.setRowTextStyle(mygrid.getRowId(i),"background-color: red");
  }

Answer posted by Brian Huisman on Apr 17, 2009 09:14

No, I am not using the forEachRow iterator.  I am already using the "for" operator as you are suggesting.

  mygrid.parse(data, "jsarray");

  for (var x = 0; x < style.length; x++)
    if (style[x]) mygrid.setRowTextStyle(x, style[x]);


Where the style variable is an array of styles needed to be applied to each row.  It contains the same number of elements as there are rows in the table.

Answer posted by Brian Huisman on Apr 17, 2009 11:32

We discovered that the bug happens if mygrid.filterByAll(); is called after the data is loaded into the table using .parse().

If we don't call this function, then filtering will not overwrite the styles of rows not yet rendered.  Can you tell us why this is?  Is it working as intended?

Answer posted by dhxSupport on Apr 20, 2009 00:55

You have to call setRowTextStyle only after all rows was loaded. To detect if all rows was loaded you can use "onXLE" event (availible in PRO version only):

mygrid.attachEvent("onXLE",function(){

 for (var x = 0; x < style.length; x++)
  if (style[x]) mygrid.setRowTextStyle(x, style[x]);

});