Click here to Skip to main content
Click here to Skip to main content

How to Fixed GridView's Header and Footer when scrolling?

, 30 Oct 2007
Rate this:
Please Sign up or sign in to vote.
Using CSS, Javascript to Fixed Gridview's Header and Footer

Screenshot - gvDemo.jpg

Introduction

This article is to show you how to Fix GridView's Header and Footer in a simple code with CSS and JavaScript.

Background

Understand CSS and JavaScript

Using the code

  1. Use the below 2 Css Classes for GridView Header and footer
    .GVFixedHeader { font-weight:bold; background-color: Green; position:relative; 
                     top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}
    .GVFixedFooter { font-weight:bold; background-color: Green; position:relative;
                     bottom:expression(getScrollBottom(this.parentNode.parentNode.parentNode.parentNode));}
    
  2. Use the below JavaScript to compute Footer's Position
    <script language="javascript" type="text/javascript">
            function getScrollBottom(p_oElem)
            {
             return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight;
            }
    </script>
  3. Create GridView inside a Panle, Set Panle's property ScrollBars to "Auto", Gridview's HeaderStyle to "GVFixedHeader" and FooterStyle to "GVFixedFooter".
    <asp:Panel runat="server" ID="pnlContainer" ScrollBars="Auto" Height="150px" Width="400">
        <asp:GridView ShowFooter="True" runat="server" Width="96%" ID="gvDemo" AutoGenerateColumns="False">
        <HeaderStyle CssClass="GVFixedHeader" />
        <FooterStyle CssClass="GVFixedFooter" />
            <Columns>
                <asp:TemplateField HeaderText="C1">
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("C1") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        C1 Footer Here
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="C2">
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("C2") %>'></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        C2 Footer Here
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
       </asp:Panel>
  4. Code Behide: In the Page_Load function we Bind the data source to GridView.
     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Dim dt As New DataTable
            dt.Columns.Add("C1")
            dt.Columns.Add("C2")
            Dim drRow As DataRow
            For i As Integer = 0 To 10
                drRow = dt.NewRow
                drRow(0) = "C1" & i
                drRow(1) = "C2" & i
                dt.Rows.Add(drRow)
            Next
            Me.gvDemo.DataSource = dt
            Me.gvDemo.DataBind()
        End Sub
  5. Run the Page, you will see that the Header and Footer is fixed when you scrolling.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

fenglinzh
Web Developer
Singapore Singapore
My Website:
Hcj @ Singapore

Comments and Discussions

 
GeneralGridView With Fixed Headers in Asp.Net Using C# and jQuery PinmemberBinu198512-Jun-14 20:25 
GeneralMy vote of 2 Pinmemberhsakarp4-Sep-13 0:09 
Questionhelp!!!, not working PinmemberMember 91034651-Jul-12 20:12 
SuggestionShow footer at the bottom of the grid when there is less data PinmemberMallyaC27-Mar-12 21:10 
QuestionIts not work Pinmembertzahiel22-Jan-12 3:57 
GeneralMy vote of 5 Pinmembercllamed21-Aug-11 15:37 
GeneralA Scrollable GridView with a Fixed Header in .NET Pingroupelizas9-Feb-10 19:21 
GeneralMy vote of 1 Pinmemberthawait.himanshu3-Feb-10 16:11 
GeneralMy vote of 1 PinmemberMember 393553716-Dec-08 10:21 
GeneralThis code not working in Mozilla firefox Pinmembermanomani23-Sep-08 2:41 
GeneralPerfect PinmemberBrian McQueen18-Sep-08 4:49 
GeneralAlternate method: no resize bug Pinmemberkccougar6-Nov-07 5:04 
QuestionRe: Alternate method: no resize bug Pinmemberpbansal31-Dec-07 0:40 
GeneralRe: Alternate method: no resize bug Pinmemberkccougar31-Dec-07 3:17 
GeneralNice One PinmemberPrakash@kappsoft30-Oct-07 20:17 
GeneralMissing source Pinmemberchitty229-Oct-07 22:09 
AnswerRe: Missing source Pinmemberfenglinzh30-Oct-07 17:05 
GeneralOOPs!!! PinmemberNigam SAMir25-Oct-07 18:26 
QuestionThis method only works well with low amount of rows in your grid Pinmembertoprope9830-Oct-07 2:59 
AnswerRe: This method only works well with low amount of rows in your grid Pinmemberfenglinzh30-Oct-07 17:10 
GeneralRe: This method only works well with low amount of rows in your grid [modified] Pinmembertoprope9831-Oct-07 7:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 30 Oct 2007
Article Copyright 2007 by fenglinzh
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid