GridView With Fixed Headers in Asp.Net Using jQuery

Description:-

In this example we explain that how to display Gridview with Fixed Header and scrollbar in asp.net using JQuery Or scrollable Gridview with Fixed header in asp.net.

We all know that Gridview is the most important control in Asp.Net to display data in table format. So if we have a large number of records that we want to display to the user so first we will make GridView with scrollable because of small portion of the webpage. The issue is solved but main problem is that Gridview Header will remain at the top always. So in simple scrollbar the GridView header will not display at top when you scroll the GridView to show next records.

So how to scroll only body of the GridView and header will remain same at top. To do this here we demonstrate display GridView with fixed header using JQuery in asp.net

Download File:- jquery-2.1.1.min.js

Default.aspx:-

<head runat="server">
<title>GridView With Fixed Headers in Asp.Net with JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script language="javascript">
        $(document).ready(function () {
/*Code to copy the gridview header with style*/
var gridHeader = $('#<%=gv_employee.ClientID%>').clone(true);
/*Code to remove first ror which is header row*/
            $(gridHeader).find("tr:gt(0)").remove();
            $('#<%=gv_employee.ClientID%> tr th').each(function (i) {
/* Here Set Width of each th from gridview to new table th */
                $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
            });
            $("#controlHead").append(gridHeader);
            $('#controlHead').css('position', 'absolute');
            $('#controlHead').css('top', $('#<%=gv_employee.ClientID%>').offset().top);
        });
</script>
</head>
<body>
<form id="form1"runat="server">
<div>
<h3>
            GridView With Fixed Headers in Asp.Net Using jQuery</h3>
<div style="width: 450px;">
<div id="controlHead">
</div>
<div style="height: 70px; overflow: auto">
<asp:GridView ID="gv_employee" runat="server" AutoGenerateColumns="False" EmptyDataText="There are no data records to display."
BorderStyle="Solid">
<Columns>
<asp:BoundField DataField="Emp_ID" HeaderText="Emp_ID"/>
<asp:BoundField DataField="Emp_name" HeaderText="Emp_name"/>
<asp:BoundField DataField="Address" HeaderText="Address"/>
</Columns>
<HeaderStyle BackColor="#66CCFF"/>
</asp:GridView>
</div>
</div>
</div>
</form>
</body>

Default.aspx.cs:-

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    DataTable dt = newDataTable();
    dt.Columns.Add("Emp_ID");
    dt.Columns.Add("Emp_name");
    dt.Columns.Add("Address");

    DataRow dr = dt.NewRow();
    dr[0] = 1;
    dr[1] = "Umesh Patel";
    dr[2] = "Ahmedabad";
    dt.Rows.Add(dr);

    DataRow dr1 = dt.NewRow();
    dr1[0] = 2;
    dr1[1] = "Chirag Patel";
    dr1[2] = "Gandhinagar";
    dt.Rows.Add(dr1);

    DataRow dr2 = dt.NewRow();
    dr2[0] = 3;
    dr2[1] = "Jatin Patel";
    dr2[2] = "Rajkot";
    dt.Rows.Add(dr2);

    DataRow dr3 = dt.NewRow();
    dr3[0] = 4;
    dr3[1] = "Kirit Patel";
    dr3[2] = "Surat";
    dt.Rows.Add(dr3);

    DataRow dr4 = dt.NewRow();
    dr4[0] = 4;
    dr4[1] = "Komal Patel";
    dr4[2] = "Amreli";
    dt.Rows.Add(dr4);

    DataRow dr5 = dt.NewRow();
    dr5[0] = 5;
    dr5[1] = "Kiran Patel";
    dr5[2] = "Ahmedabad";
    dt.Rows.Add(dr5);

    gv_employee.DataSource = dt;
    gv_employee.DataBind();
  }
}

D365 F&O Solutions

GridView With Fixed Headers in Asp.Net Using jQuery

Author : Umesh Patel

D365 F&O Solutions

GridView With Fixed Headers in Asp.Net Using jQuery

Author : Umesh Patel

Related Posts