Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C#2.0
I want to implement a scrollable gridview with fixed header, including the capability to sort on the header (the code is shown below). Please provide advice.
<div style="overflow: scroll; width: 100%; height: 350px">
<asp:GridView id="GridView1" runat="server" Width="754px"
OnRowDataBound="GridView1_RowDataBound"DataKeyNames="UniqueID"
GridLines="None"  ForeColor="#333333"
EmptyDataText="There are no data records to display."
DataSourceID="sdsMapsAdd" CellPadding="4" AutoGenerateColumns="False"
AllowSorting="True" AllowPaging="False"  OnRowCommand="GridView1_RowCommand"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True"  SortExpression="UniqueID" Visible="false"   />
<asp:BoundField DataField="Name" HeaderText="Name"  ReadOnly="True" SortExpression="SiteName" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"  />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</div>

 
Also, I am trying to use this script
 
<script language="javascript" type="text/javascript">
// This Script is used to maintain Grid Scroll on Partial Postback
    var scrollTop;
   //Register Begin Request and End Request
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    //Get The Div Scroll Position
    function BeginRequestHandler(sender, args)
        {
          var m = document.getElementById('divGrid');
              scrollTop=m.scrollTop;
        }
         //Set The Div Scroll Position
      function EndRequestHandler(sender, args)
       {
       var m = document.getElementById('divGrid');
           m.scrollTop = scrollTop;
        }
 </script>
 

and CSS I am using :
.HeaderFreez
{
   position:relative ;
   top:expression(this.offsetParent.scrollTop);
   z-index:10;
}
 

However doing this my header is not fixed. Please let me know whar I am missing here?
 
Thanks & Regards
Care Career
Posted 24-Jun-13 0:53am
vibsg428
Edited 24-Jun-13 0:59am
v2

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You need to set Gridview's HeaderStyle CssClass as follows
CssClass="HeaderFreez"
  Permalink  
Comments
vibsg at 24-Jun-13 6:43am
   
Yes I have used this css class aleardy. Please check the below code. still not working. IE version is 6.0 I am testing.
 
<div id="divGrid" style="overflow: auto; height: 300px">
<asp:GridView id="GridView1" runat="server" Width="754px"
OnRowDataBound="GridView1_RowDataBound"DataKeyNames="UniqueID"
GridLines="None" ForeColor="#333333"
EmptyDataText="There are no data records to display."
DataSourceID="sdsMapsAdd" CellPadding="4" AutoGenerateColumns="False"
AllowSorting="True" AllowPaging="False" OnRowCommand="GridView1_RowCommand"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged">


<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="UniqueID" Visible="false" />
<asp:BoundField DataField="Name" HeaderText="Name" ReadOnly="True" SortExpression="SiteName" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />



<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" CssClass="HeaderFreez"/>


</div>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Maciej Los 295
1 OriginalGriff 249
2 Sergey Alexandrovich Kryukov 205
3 Aajmot Sk 197
4 Sinisa Hajnal 176
0 OriginalGriff 7,800
1 Sergey Alexandrovich Kryukov 7,072
2 DamithSL 5,604
3 Manas Bhardwaj 4,986
4 Maciej Los 4,790


Advertise | Privacy | Mobile
Web03 | 2.8.1411023.1 | Last Updated 24 Jun 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100