Freezing Gridview header not working

Question

I need to freeze the grid view header on scrolling grid view. Assigned data's to data table and binding it to gridview called 'report'. I tried a lot, but it is not working.. Can any one help me?

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
    <ContentTemplate>
        <center>
           <asp:Label ID="mess" runat="server" Font-Bold="true" ForeColor="Red"></asp:Label>
        </center>                        
        <div class="table_outer_n">
           <asp:GridView ID="report" runat="server"  Width="100%" HeaderStyle-CssClass="Freezing"></asp:GridView>
           <asp:GridView ID="gvDetails" runat="server" Visible="true"></asp:GridView> 
        </div>
     </ContentTemplate>
     <Triggers>
        <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
        <asp:PostBackTrigger ControlID="report" />
        <asp:PostBackTrigger ControlID="gvDetails" />
        <asp:PostBackTrigger ControlID="btndwn" />
      </Triggers>
</asp:UpdatePanel> 

//Code behind
DataTable claims = new DataTable();   
//.....datatable codes goes here
dr["REMARKS"] = remarks;
dr["VALIDATION"] = validation;
DataRow dr = claims.NewRow();
claims.Rows.Add(dr);

report.DataSource = claims;
report.DataBind();

//css
.Freezing {
   position:relative ;
   top:expression(this.offsetParent.scrollTop);
   z-index: 10;
}

possible duplicate question http://stackoverflow.com/questions/9648727/freeze-the-header-scroll-the-gridview — pmtamal, Jul 08 '14 at 05:44

score 1 · Accepted Answer · answered Jul 08 '14 at 05:55

1

you can try like this:

 <div style ="height:200px; width:617px; overflow:auto;">
// Your Grid View

 <asp:GridView ID="report" runat="server"  Width="100%" >
</asp:GridView>
 </div>

Source: Source code with Live Demo

answered Jul 08 '14 at 05:55

Dgan

10,077
1
29
51

did u saw example provided in link?? – Dgan Jul 12 '14 at 07:55
This is what I currently have: jsfiddle.net/gxxn9bkt < this code is what the full generated page looks like. I added a scrollbar in the outer DIV but now trying to make the header stick on DIV scroll. If I can just do it on the table itself, I can remove all the extra divs and table – SearchForKnowledge Feb 05 '15 at 18:19
The header is missing from fiddle :/ – SearchForKnowledge Feb 06 '15 at 15:45
Create your header as separate fixed table on upper side of gridview...I forgot to fork it – Dgan Feb 06 '15 at 17:51

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

Please follow this link On CodeProject

you need to set the header style as

<style type="text/css">
    .FixedHeader {
        position: absolute;
    }     
</style>   

HeaderStyle-CssClass="FixedHeader"

Or as comment suggested this answer on stackoverflow would help you too

edited May 23 '17 at 11:57

Community

1
1

answered Jul 08 '14 at 05:46

Ashish Rajput

1,489
1
11
20

Header get conjusted, the alignment of table content and header is different – Varghese Jul 09 '14 at 05:05

Freezing Gridview header not working

2 Answers2