Click here to Skip to main content
15,867,308 members
Articles / Web Development / CSS
Article

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

Rate me:
Please Sign up or sign in to vote.
3.38/5 (26 votes)
30 Oct 2007 255.9K   7.2K   62   21
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


Written By
Web Developer
Singapore Singapore
My Website:
Hcj @ Singapore

Comments and Discussions

 
GeneralMy vote of 2 Pin
hsakarp4-Sep-13 0:09
hsakarp4-Sep-13 0:09 
Questionhelp!!!, not working Pin
Member 91034651-Jul-12 20:12
Member 91034651-Jul-12 20:12 
SuggestionShow footer at the bottom of the grid when there is less data Pin
MallyaC27-Mar-12 21:10
MallyaC27-Mar-12 21:10 
QuestionIts not work Pin
tzahiel22-Jan-12 3:57
tzahiel22-Jan-12 3:57 
GeneralMy vote of 5 Pin
cllamed21-Aug-11 15:37
cllamed21-Aug-11 15:37 
GeneralA Scrollable GridView with a Fixed Header in .NET Pin
elizas9-Feb-10 19:21
elizas9-Feb-10 19:21 
GeneralMy vote of 1 Pin
Himanshu Thawait3-Feb-10 16:11
Himanshu Thawait3-Feb-10 16:11 
GeneralMy vote of 1 Pin
Rajeev ARSD16-Dec-08 10:21
Rajeev ARSD16-Dec-08 10:21 
GeneralThis code not working in Mozilla firefox Pin
manomani23-Sep-08 2:41
manomani23-Sep-08 2:41 
GeneralPerfect Pin
Brian McQueen18-Sep-08 4:49
Brian McQueen18-Sep-08 4:49 
GeneralAlternate method: no resize bug Pin
kccougar6-Nov-07 5:04
kccougar6-Nov-07 5:04 
QuestionRe: Alternate method: no resize bug Pin
pbansal31-Dec-07 0:40
pbansal31-Dec-07 0:40 
GeneralRe: Alternate method: no resize bug Pin
kccougar31-Dec-07 3:17
kccougar31-Dec-07 3:17 
GeneralNice One Pin
Prakash.Ramamurthy1@wipro.com30-Oct-07 20:17
Prakash.Ramamurthy1@wipro.com30-Oct-07 20:17 
GeneralMissing source Pin
chitty229-Oct-07 22:09
chitty229-Oct-07 22:09 
AnswerRe: Missing source Pin
fenglinzh30-Oct-07 17:05
fenglinzh30-Oct-07 17:05 
GeneralOOPs!!! Pin
248912825-Oct-07 18:26
248912825-Oct-07 18:26 
QuestionThis method only works well with low amount of rows in your grid Pin
toprope9830-Oct-07 2:59
toprope9830-Oct-07 2:59 
AnswerRe: This method only works well with low amount of rows in your grid Pin
fenglinzh30-Oct-07 17:10
fenglinzh30-Oct-07 17:10 
GeneralRe: This method only works well with low amount of rows in your grid [modified] Pin
toprope9831-Oct-07 7:37
toprope9831-Oct-07 7: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.