asked on

Scrollable gridview with fixed header and footer

Hi Experts,

I have a very simple gridview. I want to freeze its header and footer while scrolling.

<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="GVHeader" />
<FooterStyle CssClass="GVFooter" />
<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>

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

Style sheet
----------------
.GVHeader
{
font-weight: bold;
background-color: Green;
position: relative;
}

.GVFooter
{ font-weight:bold;
background-color: Green;
position:relative;
}

Lokesh B R

Hi,

Check this code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function getScrollBottom(p_oElem) {
            return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight;
        }
    </script>
    <style type="text/css">
        .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));
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <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>
    </form>
</body>
</html>

Open in new window

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

Open in new window

Taken From :
http://www.codeproject.com/Articles/21027/How-to-Fixed-GridView-s-Header-and-Footer-when-scr

RadhaKrishnaKiJaya

ASKER

Hi,

Thank you for your reply. But this code did not work. When I scroll the header and footer are also scrolling.

Thank you.

Lokesh B R

Hi,

try this

http://www.dotnetbull.com/2011/11/scrollable-gridview-with-fixed-headers.html

RadhaKrishnaKiJaya

ASKER

Thank you. I will try and get back to you.

ASKER CERTIFIED SOLUTION

RadhaKrishnaKiJaya