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

Setup and implement simple angular.js program in MVC

Cross browsers detect print events using javascript

HTML5 drag and drop