Click here to Skip to main content
11,930,048 members (50,066 online)
Click here to Skip to main content
Add your own
alternative version


62 bookmarked

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


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


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; 
    .GVFixedFooter { font-weight:bold; background-color: Green; position:relative;
  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;
  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" />
                <asp:TemplateField HeaderText="C1">
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("C1") %>'></asp:Label>
                        C1 Footer Here
                <asp:TemplateField HeaderText="C2">
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("C2") %>'>
  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
           Dim drRow As DataRow
           For i As Integer = 0 To 10
               drRow = dt.NewRow
               drRow(0) = "C1" & i
               drRow(1) = "C2" & i
           Me.gvDemo.DataSource = dt
       End Sub
  5. Run the Page, you will see that the Header and Footer is fixed when you scrolling.


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

Web Developer
Singapore Singapore
My Website:
Hcj @ Singapore

You may also be interested in...

Comments and Discussions

GeneralGridView With Fixed Headers in Asp.Net Using C# and jQuery Pin
Binu198512-Jun-14 21:25
memberBinu198512-Jun-14 21:25 
GeneralMy vote of 2 Pin
hsakarp4-Sep-13 1:09
memberhsakarp4-Sep-13 1:09 
Questionhelp!!!, not working Pin
Member 91034651-Jul-12 21:12
memberMember 91034651-Jul-12 21:12 
SuggestionShow footer at the bottom of the grid when there is less data Pin
MallyaC27-Mar-12 22:10
memberMallyaC27-Mar-12 22:10 
QuestionIts not work Pin
tzahiel22-Jan-12 4:57
membertzahiel22-Jan-12 4:57 
GeneralMy vote of 5 Pin
cllamed21-Aug-11 16:37
membercllamed21-Aug-11 16:37 
GeneralA Scrollable GridView with a Fixed Header in .NET Pin
elizas9-Feb-10 20:21
groupelizas9-Feb-10 20:21 
GeneralMy vote of 1 Pin
thawait.himanshu3-Feb-10 17:11
memberthawait.himanshu3-Feb-10 17:11 
GeneralMy vote of 1 Pin
Member 393553716-Dec-08 11:21
memberMember 393553716-Dec-08 11:21 
GeneralThis code not working in Mozilla firefox Pin
manomani23-Sep-08 3:41
membermanomani23-Sep-08 3:41 
GeneralPerfect Pin
Brian McQueen18-Sep-08 5:49
memberBrian McQueen18-Sep-08 5:49 
GeneralAlternate method: no resize bug Pin
kccougar6-Nov-07 6:04
memberkccougar6-Nov-07 6:04 
QuestionRe: Alternate method: no resize bug Pin
pbansal31-Dec-07 1:40
memberpbansal31-Dec-07 1:40 
GeneralRe: Alternate method: no resize bug Pin
kccougar31-Dec-07 4:17
memberkccougar31-Dec-07 4:17 
GeneralNice One Pin
Prakash@kappsoft30-Oct-07 21:17
memberPrakash@kappsoft30-Oct-07 21:17 
GeneralMissing source Pin
chitty229-Oct-07 23:09
memberchitty229-Oct-07 23:09 
AnswerRe: Missing source Pin
fenglinzh30-Oct-07 18:05
memberfenglinzh30-Oct-07 18:05 
GeneralOOPs!!! Pin
Nigam SAMir25-Oct-07 19:26
memberNigam SAMir25-Oct-07 19:26 
QuestionThis method only works well with low amount of rows in your grid Pin
toprope9830-Oct-07 3:59
membertoprope9830-Oct-07 3:59 
AnswerRe: This method only works well with low amount of rows in your grid Pin
fenglinzh30-Oct-07 18:10
memberfenglinzh30-Oct-07 18:10 
GeneralRe: This method only works well with low amount of rows in your grid [modified] Pin
toprope9831-Oct-07 8:37
membertoprope9831-Oct-07 8:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web03 | 2.8.151126.1 | Last Updated 30 Oct 2007
Article Copyright 2007 by fenglinzh
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid