First, let's take a look at the two items on codeproject.
1. The freeze pane DataGridHttp://www.codeproject.com/aspnet/FreezePaneDatagrid.asp)
ExploitationArticlePractices andCodeTo implement tables that support horizontal and vertical Scrolling on ASP. NET 1.1, which is basically implemented using CSS and relatively simple.
In ASP. NET 2.0, because the HTML docktype of the document has changed (HTML-> XHTML), the horizontal scroll bar in the original text will be faulty, but there is no problem in using the vertical scroll bar and locking the header.
This method does not take into account the scrolling position of the record table when the page is PostBack, so that the user has to find the record selected/edited again, which is not user-friendly.
2. scrollinggrid: a cross-browser freeze-header two-way scrolling DataGridHttp://www.codeproject.com/aspnet/ScrollingGrid.asp)
This article uses the panel control and the DataGrid control to implement ASP. NET 1.1, a complete table that supports bidirectional scrolling and table header locking, and supports recording the scroll position of the table. After the page is PostBack, the table can still be automatically rolled to the original position. One of the biggest advantages of this control is its ability to adapt to a variety of browsers, such as Internet Explorer and Firefox.
In ASP. NET platform, because the DataGrid Control has been upgraded to the gridview, so this control is no longer available, according to the article below, the author claims that the control will be upgraded as soon as possible, however, there seems to be some trouble in implementation (how to make sure the width of each column in the header), there is no result yet.
My current practices:
- Refer to the practice mentioned in article 1 and use CSS to lock the header.
- You can use the panel control to set scrollbar to vertical, and then add the gridview control to implement the vertical scroll bar function.
- Use Atlas to add the Panel to updatepanel to ensure the scroll bar position is transparent.
Sample Code:
< H1 > Scroll bar table demonstration h1> < Style Type = "Text/CSS" > ... ... Th {...} {...} {...} { Border-Right : 1px solid silver ; Position : Relative ; Top : Expression (this. parentnode. scrollTop-2) ; /**/ /**/ /**/ /*Ie5 + only*/ } Style> <Atlas: scriptmanager id = "scriptmanager1" runat = "server" enablepartialrendering = "true"> Atlas: scriptmanager> <br/> <asp: panel id = "gridpanel" runat = "server" Height = "250px" scrollbars = "Auto" width = "562px"> <Atlas: updatepanel id = "updatepanel1" runat = "server"> <contenttemplate> <asp: gridview id = "gridview1" runat = "server" autogeneratecolumns = "false" performanceid = "objectperformance1" skinid = "gridview" width = "434px"> </ASP: gridview> </contenttemplate> </Atlas: updatepanel> </ASP: Panel>
In this way, you can implement a table that can lock the header, scroll vertically, and retain the scroll position during page PostBack to meet the needs of most applications.