Fixed / frozen Datagrid column runs slow.

[DanG]

Hi all,

I fixed a column in my datagrid using the technique below. It works
fine with a small amount of data in the grid. But as the grid grows
either horizontally or vertically, everything slows down to where the
screen becomes unusable. Clicks, tabbing, browser-page scrolling, etc.
all take an excruciatingly long time. Removing the style makes the
screen process at a normal speed (though of course, without freezing
the column), so I know that's where the issue resides.

I was really just expecting that scrolling the DIV horizontally would
cause the Expression to recalculate for the fixed column, for only
those rows which are visible on the screen. But even making the DIV
very small has no affect on the slow screen speed. It's as though the
browser is working hard to deal with the ENTIRE grid, even though most
of it is hidden behind the DIV's "window".

So, what is the browser actually doing?? Why does this Style affect so
many aspects of the screen? Is there anything I can do to limit this
problem?

Questionably,
Dan


<style>
.FixedColumn { LEFT:
expression(document.getElementById("divDatagrid").scrollLeft);
POSITION: relative }
</style>

<div id="divDatagrid">
<asp:datagrid id="Datagrid1" runat="server" style="OVERFLOW:scroll;
Height:100; Width:400;">
<columns>
<asp:boundcolumn datafield="Field1" >
<headerstyle cssclass="FixedColumn"></headerstyle>
<itemstyle cssclass="FixedColumn"></itemstyle>
</asp:boundcolumn>
<asp:boundcolumn datafield="Field2" />
</columns>
</asp:datagrid>
</div>

 

[DanG]

Figured it out. Have to use "this.offsetParent".

<style>
..FixedBoth
{
Z-INDEX: 4;
TOP: expression(this.offsetParent.scrollTop-2);
LEFT: expression(this.offsetParent.scrollLeft-2);
POSITION: relative;
}
..FixedHeader
{
Z-INDEX: 3;
TOP: expression(this.offsetParent.scrollTop-2);
LEFT: expression(-2);
POSITION: relative;
}
..FixedColumn
{
Z-INDEX: 2;
TOP: expression(-2);
LEFT: expression(this.offsetParent.scrollLeft-2);
POSITION: relative;
}
..FloatColumn
{
Z-INDEX: 1;
TOP: expression(-2);
LEFT: expression(-2);
POSITION: relative;
}
</style>


<div id="divDatagrid">
<asp:datagrid id="Datagrid1" runat="server" style="OVERFLOW:scroll;
Height:100; Width:400;">
<columns>
<asp:boundcolumn datafield="Field1" >
<headerstyle cssclass="FixedBoth"></headerstyle>
<itemstyle cssclass="FixedColumn"></itemstyle>
</asp:boundcolumn>
<asp:boundcolumn datafield="Field2" >
<headerstyle cssclass="FixedHeader"></headerstyle>
<itemstyle cssclass="FloatColumn"></itemstyle>
</asp:boundcolumn>
</columns>
</asp:datagrid>
</div>


Note:
I also have another grid that appears in a UserControl on the same
page. For some reason, the offsetParent wasn't helping. I had to use:
"this.parentElement.parentElement.parentElement.parentElement.parentElement".
I made other styles for those.

I have callouses on my hands from patting myself on the back.

Dan