开发者

Freeze GridView Header in ASP.NET?

开发者 https://www.devze.com 2023-01-15 20:36 出处:网络
I have gridview with 15 and above columns, I need to freeze the header of the gridview using the following css :

I have gridview with 15 and above columns, I need to freeze the header of the gridview using the following css :

  .container
        {
            overflow: auto;
        }
        /* Keep the header cells positioned as we scroll */
        .container table th
        {
           position: relative; 
        }
        /* For alignment of the scroll bar */
        .container table tbody
        {
            overflow-x: hidden;
        }

body of the grid scroll well but, my gridview header is not scrolled on y axis.

my grid view code as follow.

<asp:gridview id="RadGrid1" runat="server" borderstyle="None" borderwidth="1px"
    gridlines="Both" autogeneratecolumns="true" onrowcommand="OnSelectedChanged"
    rowstyle-wrap="false" rowstyle-cssclass="container" 
    onrowdatabound="RadGrid1_RowDataBound" datakeynames="DocID,DocumentName">
      <headerstyle cssclass="container" backcolor="LightBlue" wrap="false"    
          horizontalalign="Center" verticalalign="Middle" />
      <selectedrowstyle backcolor="Red" wrap="false" />
      <columns>
         <asp:TemplateField>
            <HeaderTemplate>
               <input id="chkAll" onclick="javascript:SelectAllCheckboxes(this);"
                    runat="server" type="checkbox" />
            </HeaderTemplate>
            <ItemTemplate>
               <asp:CheckBox ID="chkSelect" runat="server" />
            </ItemTemplate>
         </asp:TemplateField>
         <asp:ButtonField开发者_JS百科 ButtonType="Link" HeaderText="View" Text="View" CommandName="view" />
         <asp:ButtonField ButtonType="Link" HeaderText="Activity" Text="Activity" CommandName="activity" />
      </columns>
</asp:gridview>


Article : Grid View with fixed header

For the gridview to freez the header

div#gridPanel 
{
   width:900px;
   overflow:scroll;
   position:relative;
}


div#gridPanel th
{  
   top: expression(document.getElementById("gridPanel").scrollTop-2);
left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
   position: relative;
   z-index: 20;
}


<asp:Panel ID="gridPanel" runat="server" Height="200px" Width="100px" ScrollBars="Auto">
   asp.net grid view
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号