In this article I will explain how to implement scrollable gridview with fixed header in asp.net using JQuery. GridView control of ASP.NET 4.5.1 makes our task much simpler as compared to HTML tables. But one problem which I always faced with GridView control is of scrolling headers. I tried several forums and websites, but didn’t come up with a good solution. GridView doesn’t have the ability to scroll. But if the GridView contains the larger number of rows or columns (say more than 100 rows and 15 columns), we want it to have scrollbars.

Now it is time to see all the activity in detail :

  • create a database in the SQL ServerCreate an ASP.NET website.
  • Create jquery-1.4.1.min.js and ScrollableGridPlugin.js and write this code in the header section. copy and paste it inside  <Head>.
    These script files by using these files we can manage the GridView header fixed postion.


    <
    script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

    <
    script type="text/javascript" src="Scripts/ScrollableGridPlugin.js"></script>
  • Write the jQuery code that is given below.

    script
    type="text/javascript">
            $(document).ready(function () {
                $('#<%=GridView1.ClientID %>').Scrollable();
            });

    </
    script
    >

  • The next step is to create a new HTML table in HeaderDiv which will contain the new header for the GridView. This job will be done by a JavaScript function (say CreateGridHeader()). This JavaScript function also sets the HeaderDiv style as per the DataDiv and new HTML table style as per GridView style and also we will hide the original header of GridView. This function will be called every time after filling the GridView with data as well as on the Page Load.
    created in the Page Load Default.aspx page like this :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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">
    <title>Scrollable GridView With a Fixed Header Using jQuery</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <
script type="text/javascript" src="Scripts/ScrollableGridPlugin.js"></script>
      <
script type="text/javascript">
        $(document).ready(function () {
            $('#<%=GridView1.ClientID %>').Scrollable();
        });
      </script
>
<
body>
    <form id="form1" runat="server">
    <asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="false">
        <RowStyle BackColor="#EFF3FB" />
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <AlternatingRowStyle BackColor="White"
/>
        <Columns>
            <asp:BoundField DataField="id" HeaderText="Id" />
            <asp:BoundField DataField="name" HeaderText="Name" />
            <asp:BoundField DataField="salary" HeaderText="Salary" />\
            <asp:BoundField DataField="addres" HeaderText="Address" />
        </Columns>
    </asp:GridView>
    </form>
</
body
>

</html>

  • Binding the GridView with a DataTable object in the code behind file of Default.aspx page.

    using
    System;
    using
    System.Collections.Generic;
    using
    System.Linq;
    using
    System.Web;
    using
    System.Web.UI;
    using
    System.Web.UI.WebControls;
    using
    System.Data;
    using
    System.Data.SqlClient;


    public
    partial class Default2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            SqlConnection con = new SqlConnection(@"Data Source=.;Initial Catalog=akshay;Persist Security Info=True;User ID=sa;Password=wintellect";
            SqlDataAdapter adap = new SqlDataAdapter("select * from Person",con);
            DataSet ds=new DataSet();
            adap.Fill(ds,"Person");
            GridView1.DataSource = ds.Tables["Person"];
            GridView1.DataBind();
            GridView1.UseAccessibleHeader = true;
            GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
        }

    }
  • Run the Page by f5, you will see that the Header and Footer is fixed when you scrolling. You are now ready with the GridView with fixed headers.

If you looking for windows web hosting services who support ASP.Net 4.5.1 please visit our Site ASPHostPortal.com