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

fenglinzh

Rate me:

3.38/5 (26 votes)

30 Oct 2007

Using CSS, Javascript to Fixed Gridview's Header and Footer

Download GridViewDemo.zip - 1.3 KB

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

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));}

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>

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>

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

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

fenglinzh

Web Developer

Singapore

My Website:
Hcj @ Singapore

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

Tagged as

Stats

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

Introduction

Background

Using the code

License

Comments and Discussions