Locking the table header and rolling tables on ASP. NET

Source: Internet
Author: User

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:

    1. Refer to the practice mentioned in article 1 and use CSS to lock the header.
    2. You can use the panel control to set scrollbar to vertical, and then add the gridview control to implement the vertical scroll bar function.
    3. 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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.