Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to fix GridView Header in ASP.NET Using jQuery

Author: Jeff Nava

This article will show how we can fix headers for GridView in ASP.NET using jQuery.

We mostly use GridView to display data in ASP.NET web applications. Many times we need headers to be there at the top to see the column headings when we go down to the page but if we have long list of records and we are displaying it on one page, we cannot see the header. jQuery and WebToolKit has made it easy for us to solve this problem. I will show you how we can fix header and scroll records. If you are not familiar with jQuery and jQuery functionalities, please see articles on DevASP.NET about jQuery.

For this article you need to download jQuery and webtoolkit scrollable HTML Table plugin for jQuery and add reference in your code. 

  1. Open Visual Studio 2012
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Web Site
  4. Website > Add New Item > Web Form
  5. Write following tags in between head tag of aspx page

    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js" >script>
    <script src="Scripts/webtoolkit.jscrollable.js" type="text/javascript">script>
    <script src="Scripts/webtoolkit.scrollabletable.js" type="text/javascript">script>

    I have all these three files in “Scripts” folder. First is the jQuery file, second and third are JavaScript files which have the code for Scrollable GridView.

  6. Now add another script tag in between head tag and write code below

    <script type="text/javascript">
      $(document).ready(function () {
        jQuery('table').Scrollable(300, 700);
      });
    script>
    This jQuery code has function which calls a function in jscrollable.js library which internally uses the scrollabletable.js to fix the header and make GridView scrollable.
     
  7. Write code below in between div tag

    <asp:GridView ID="gvFixedHeader" runat="server" DataSourceID="SqlDataSource1" 
              AutoGenerateColumns="False" DataKeyNames="EmployeeID" OnPreRender="gvFixedHeader_PreRender">
      <Columns>
        <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"/>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" /> 
        <asp:BoundField DataField="LastName" HeaderText="LastName" /> 
        <asp:BoundField DataField="Title" HeaderText="Title" /> 
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="State" HeaderText="State" /> 
      Columns>
    asp:GridView>
            
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnString %>" 
    SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title], [City], [State] FROM [Employees]">
    asp:SqlDataSource>
    Here I am using a GridView and added columns into it and set the AutoGenerateColumns false. I am also using a SQLDataSource to connect to database and get the data.
  8.  Here is the complete code in aspx page

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    DOCTYPE html>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>title>
      <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js" >script>
      <script src="Scripts/webtoolkit.jscrollable.js" type="text/javascript">script>
      <script src="Scripts/webtoolkit.scrollabletable.js" type="text/javascript">script>
      <script type="text/javascript">
         $(document).ready(function () {
           jQuery('table').Scrollable(300, 700);
         });
      script>
    head>
    <body>
        <form id="form1" runat="server">
        <div>
          <asp:GridView ID="gvFixedHeader" runat="server" DataSourceID="SqlDataSource1" 
              AutoGenerateColumns="False" DataKeyNames="EmployeeID" OnPreRender="gvFixedHeader_PreRender">
          <Columns>
          <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"/>
          <asp:BoundField DataField="FirstName" HeaderText="FirstName" /> 
          <asp:BoundField DataField="LastName" HeaderText="LastName" /> 
          <asp:BoundField DataField="Title" HeaderText="Title" /> 
          <asp:BoundField DataField="City" HeaderText="City" />
          <asp:BoundField DataField="State" HeaderText="State" /> 
          Columns>
          asp:GridView>
            
          <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnString %>" 
          SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title], [City], [State] FROM [Employees]">
          asp:SqlDataSource>
        div>
        form>
    body>
    html>
  9.  Now add a PreRender event in vb or cs file

    C#

    protected void gvFixedHeader_PreRender(object sender, EventArgs e)
    {
       gvFixedHeader.UseAccessibleHeader = true;
       gvFixedHeader.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
    VB.NET

    Protected Sub gvFixedHeader_PreRender(sender As Object, e As EventArgs)
      gvFixedHeader.UseAccessibleHeader = True
      gvFixedHeader.HeaderRow.TableSection = TableRowSection.TableHeader
    End Sub

  10.  Press F5 and see the result

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to use CKEditor in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net