glassy
11-27-2006, 07:59 AM
I've run into the same performance issue that this thread refers to:
http://www.yui-ext.com/forum/viewtopic.php?t=199
(When there are lots of columns, it takes very long to resize them.)
And it gets worse when there are lots of rows.
Also it takes more time to resize columns on the left than columns on the right, probably because there are more cells to reposition.
The solution I came up with to speed it up is to use float: left on cells instead of absolute positioning all of them. This way when a column is resized, only the cell widths of a single column needs to be updated, and all the cells on the right will reposition themselves automatically because of float: left
The short version of the fix which can be easily pasted in html files is:
<style>
.ygrid-col{
position: static; /* use float: left instead of position: absolute; */
float: left;
}
</style>
<script>
YAHOO.ext.grid.GridView.prototype.setCSSWidth = function(colIndex, width, pos) {
var selector = ["#" + this.grid.id + " .ygrid-col-" + colIndex, ".ygrid-col-" + colIndex];
YAHOO.ext.util.CSS.updateRule(selector, 'width', width + 'px');
/* the following is commented out from original
because when we use float: left, we don't need to set positions
if(typeof pos == 'number'){
YAHOO.ext.util.CSS.updateRule(selector, 'left', pos + 'px');
}
*/
}
</script>
The result after this change is that column resizes are now a lot faster when there are lots of columns/rows. Also the speed of resizing the first and last columns are the same.
The only problem is that when using the code above in IE in Strict Mode, the headers and the cells don't line up right because of box model differences. (IE doesn't include the 1px left border in the width because it doesn't understand the box-sizing property.) This requires a small fix.
To see all this in action:
The original slow version:
http://www.viquasoft.com/yui-ext/examples/grid/array-grid-cols.html
The fast version using the code above (columns don't align properly in IE):
http://www.viquasoft.com/yui-ext/examples/grid/array-grid-cols-fast.html
The fast version with some small modifications so all browsers work the same in Strict Mode.
http://www.viquasoft.com/yui-ext/examples/grid/array-grid-cols-fast-fixed.html
If anyone has any comments whether this method has any drawbacks or problems, or any other suggestions that would be great!
The one drawback I can think of is that dynamic repositioning of columns won't be as easy as changing the absolute positions, it might require some rearranging in the DOM (I'm not sure about that though .. )
http://www.yui-ext.com/forum/viewtopic.php?t=199
(When there are lots of columns, it takes very long to resize them.)
And it gets worse when there are lots of rows.
Also it takes more time to resize columns on the left than columns on the right, probably because there are more cells to reposition.
The solution I came up with to speed it up is to use float: left on cells instead of absolute positioning all of them. This way when a column is resized, only the cell widths of a single column needs to be updated, and all the cells on the right will reposition themselves automatically because of float: left
The short version of the fix which can be easily pasted in html files is:
<style>
.ygrid-col{
position: static; /* use float: left instead of position: absolute; */
float: left;
}
</style>
<script>
YAHOO.ext.grid.GridView.prototype.setCSSWidth = function(colIndex, width, pos) {
var selector = ["#" + this.grid.id + " .ygrid-col-" + colIndex, ".ygrid-col-" + colIndex];
YAHOO.ext.util.CSS.updateRule(selector, 'width', width + 'px');
/* the following is commented out from original
because when we use float: left, we don't need to set positions
if(typeof pos == 'number'){
YAHOO.ext.util.CSS.updateRule(selector, 'left', pos + 'px');
}
*/
}
</script>
The result after this change is that column resizes are now a lot faster when there are lots of columns/rows. Also the speed of resizing the first and last columns are the same.
The only problem is that when using the code above in IE in Strict Mode, the headers and the cells don't line up right because of box model differences. (IE doesn't include the 1px left border in the width because it doesn't understand the box-sizing property.) This requires a small fix.
To see all this in action:
The original slow version:
http://www.viquasoft.com/yui-ext/examples/grid/array-grid-cols.html
The fast version using the code above (columns don't align properly in IE):
http://www.viquasoft.com/yui-ext/examples/grid/array-grid-cols-fast.html
The fast version with some small modifications so all browsers work the same in Strict Mode.
http://www.viquasoft.com/yui-ext/examples/grid/array-grid-cols-fast-fixed.html
If anyone has any comments whether this method has any drawbacks or problems, or any other suggestions that would be great!
The one drawback I can think of is that dynamic repositioning of columns won't be as easy as changing the absolute positions, it might require some rearranging in the DOM (I'm not sure about that though .. )