FIXED HEADER TO GRIDVIEW


IN ASPX:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

 <style type="text/css">
<%-- This style to use Fixed header  --%>  
    .GVFixedHeader { font-weight:bold; background-color:Gray; position:relative;
                 top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}

    </style>
  
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <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" />
   
        <Columns>
            <asp:TemplateField HeaderText="C1">
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                </ItemTemplate>
              
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C2">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("FriendName") %>'></asp:Label>
                </ItemTemplate>
               
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
   </asp:Panel>
    </div>
   
    </form>
</body>
</html>



IN ASPX.CS:

protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("FriendName", typeof(string));
        for (int i = 1; i < 10; i++)
        {
            DataRow dr = dt.NewRow();
            dr["Name"] = "Ravinder" + i;
            dr["FriendName"] = "Ramesh" + i;
            dt.Rows.Add(dr);
        }
        gvDemo.DataSource = dt;
        gvDemo.DataBind();
    }



OUTPUT:

               when you scroll the grid  header is not move

Comments

Popular posts from this blog

Cross browsers detect print events using javascript

Setup and implement simple angular.js program in MVC