Implement the fixed gridview header function through client Extension

When the gridview has a large amount of data on a single page and needs to scroll vertically, we usually wrap the gridview in a div and then set the DIV style. The disadvantage of this method is that the header of the gridview cannot be fixed during scrolling and the field of view is rolled out. There are many ways to implement fixed gridview headers on the Internet, but most of them are complicated. They often require a lot of additional code on the client or server side. In this example, the author only implements this function through a client script.

<Style type = "text/CSS">
. _ Gridviewclass Th {
Position: relative;
}
. _ Gridviewclass tr
{

Height: 0px;
}

</Style>
<SCRIPT>
Function onload ()
{
// Called when page first Loads
Freezegridviewheader ("gridview1", '400px ', '800px', "1px solid black", null );
}


Function freezegridviewheader (gridid, H, W, wrapperdivborderstyle,
Wrapperdivcssclass)
{
/// <Summary> used to create a fixed gridview header and allow
/// Scrolling </Summary>
/// <Param name = "gridid" type = "string"> client-side ID of
/// Gridview Control </param>
/// <Param name = "H" type = "Number"> height of the scrollable grid </param>
/// <Param name = "W" type = "Number"> width of the scrollable grid </param>
/// <Param name = "wrapperdivborderstyle" type = "string"> CSS style to be
/// Applied to the gridview's wrapper Div element </param>
/// <Param name = "wrapperdivcssclass" type = "string"> CSS class to be
/// Applied to the gridview's wrapper Div element </param>
VaR grid = Document. getelementbyid (gridid );
If (grid! = 'Undefined ')
{
Grid. style. Visibility = 'ddd ';
Grid. classname = (grid. classname = NULL |
Grid. classname = 'undefined' |
Grid. classname = '')? '_ Gridviewclass': grid. classname +
'_ Gridviewclass ';
If (grid. parentnode! = 'Undefined ')
{
// Find wrapper Div output by gridview
VaR DIV = grid. parentnode;
If (Div. tagname = "Div ")
{
If (this. _ wrapperdivcssclass! = NULL)
Div. classname = wrapperdivcssclass;
Div. style. Height = (H = NULL )? '400p': H );
Div. style. width = (W = NULL )? '800px ': W );
If (wrapperdivborderstyle! = NULL)
Div. style. Border = wrapperdivborderstyle;
Div. style. Overflow = "Auto ";
}
}
// Find Dom tbody element and remove first tr tag from
// It and add to a thead element instead so CSS styles
// Can be applied properly in both IE and Firefox
VaR tags = grid. getelementsbytagname_r ('tbody ');
If (tags! = 'Undefined ')
{
VaR tbody = tags [0];
VaR TRS = tbody. getelementsbytagname_r ('tr ');
If (TRs! = 'Undefined ')
{
VaR headtr = tbody. removechild (TRs [0]);
VaR head = Document. createelement ('thead ');
Head. appendchild (headtr );
Grid. insertbefore (Head, grid. firstchild );
}
Tbody. style. Height = (parseint (h) *. 92) + 'px ';
Tbody. style. overflowx = "hidden ";
}
Grid. style. Visibility = 'visable ';
}
}
</SCRIPT>

Original address http://weblogs.asp.net/dwahlin/archive/2007/07/31/freeze-asp-net-gridview-headers-by-creating-client-side-extenders.aspx

 

Note: The author packs this function as an Ajax Tookit Extender for more convenient use and download. The author also introduced the specific implementation steps of extender, you can read, as a learning Asp.net Ajax toolkit extender implementation of good information, the original address of http://weblogs.asp.net/dwahlin/archive/2007/08/08/creating-an-asp-net-ajax-toolkit-extender-control.aspx

Ajax toolkit Extender for freezing gridview Headers