View Full Version : Column hide/show is very slow because of updateRule

Jonathan Feinberg
14 Apr 2007, 11:10 AM
The code I posted was buggy. The subject is true, but I have no good alternative.

Jonathan Feinberg
14 Apr 2007, 11:20 AM

Is there a reason that, instead of updating the rules that apply to the given column, you don't instead add a "x-hidden-column" class to the elements in question?

14 Apr 2007, 1:56 PM
Adding a css class to existing cells would probably be slower (depending on the number of rows). However, the big problem is it wouldn't work across changes to the data.

How many columns/rows do you have? For me it is blazing fast. But my grids never have more than 25 rows/5-6 columns.

Jonathan Feinberg
14 Apr 2007, 4:15 PM
How many columns/rows do you have? For me it is blazing fast. But my grids never have more than 25 rows/5-6 columns.

For a table with 0-10 rows and 10 columns in the model, it takes .75 seconds to show/hide 3 columns.

14 Apr 2007, 9:23 PM
I used Firebug's profile feature to see why the Grid was so slow during a resize, and it was clearly updateRule. I came upon this article from Microsoft in which they say to avoid switching classes and style rules.

Faster DHTML in 12 Steps (http://msdn.microsoft.com/workshop/author/perf/dhtmlperf.asp)

I'm sure there must be a way to change the width of the columns without calling updateRule. I think updateRule was needed because the Grid's cells were in span and div elements, but from what I can see in the beta-2 GridView.js code it looks like they are now in an actual table.

With each new release, the code has gotten better. Thanks. I'm looking forward to the next one. :)

14 Apr 2007, 10:06 PM
I have some ideas for GridView3 - let get an official release of 2 out first though. :)

15 Apr 2007, 1:38 AM
What about each column being a float:left div? Each cell would be a regular div, and they'd just stack up in the columns.

Column resizing and moving might be fast then. No need to manipulate stylesheet rules, just operate directly on the column div.

Of course there would then be the problem of ensuring that all the cells in a row have the same height, so you might just be shifting the problem from one dimension to another!.

15 Apr 2007, 6:06 AM
Looking at the beta-2 "Array Grid Example" with Firebug it looks like the rows of the Grid are all in a table. :)

The table has no THEAD, just a TBODY. Why not add a THEAD with one row in it, and simply change the "style" of the cells in the THEAD with the new width? It should be much faster than using updateRule.

15 Apr 2007, 10:06 PM
MarkT, I tried your suggestion early on but setting the width of cell is not respected cross browser (tables have their own layout rules, even with table-layout:fixed; ).

I don't know how many times I can say this:

The problem has nothing to do with updating the CSS rule.

I have investigated this to the max and the problem is it causes a reflow of many elements and for a large DOM that is slow. If you set the width of 1 element and it causes a width shift that causes a reflow for for a bunch of other elements, it has the same lag as updating the rule.

The only way I have found to speed it up is to make a stripped down grid view that doesn't do text truncation and therefore has less elements to reflow. Hiding overflow seems to be the bottleneck in my tests.