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;
 }
RadhaKrishnaKiJayaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Lokesh B RDeveloperCommented:
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
RadhaKrishnaKiJayaAuthor Commented:
Hi,

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

Thank you.
OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

RadhaKrishnaKiJayaAuthor Commented:
Thank you. I will try and get back to you.
RadhaKrishnaKiJayaAuthor Commented:
Sorry it did not work. But I could fine the answer.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>            $(document).ready(function () {
                var gridHeader = $('#<%=GVCustContacts.ClientID%>').clone(true); // Here Clone Copy of Gridview with style
                 $(gridHeader).find("tr:gt(0)").remove(); // Here remove all rows except first row (header row)
                 $('#<%=GVCustContacts.ClientID%> tr th').each(function (i) {
                        // Here Set Width of each th from gridview to new table(clone table) th
                        $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
                    });
                    $("#GHead").append(gridHeader);
                    $('#GHead').css('position', 'absolute');
                    $('#GHead').css('top', $('#<%=GVCustContacts.ClientID%>').offset().top);

            });
        </script>

Thank you for trying to help me.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RadhaKrishnaKiJayaAuthor Commented:
I found the solution by myself.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.