connectseekers.com

Friday, 13 June 2014

GridView With Fixed Headers in Asp.Net Using C# and jQuery

6/13/2014 - By Pranav Singh 3

In this article I will show you how you can bind a grid view and display the gridview data with fixed header using asp.net, C#, and jquery. so when you scroll the data on that case header of the gridview will remains same but body part will scroll. This will also let you know about scrollable gridview with fixed headers in asp.net c# vb.net.


Now for this article first we will create a new asp.netapplication and add the gridview control.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ProjectDemo_Asp.et.Default" %>

<!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>GridView With Fixed Headers in Asp.Net Using C# and 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 = $('#<%=GridView1.ClientID%>').clone(true);
            /*Code to remove first ror which is header row*/
            $(gridHeader).find("tr:gt(0)").remove();
            $('#<%=GridView1.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', $('#<%=GridView1.ClientID%>').offset().top);

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h3>
       GridView With Fixed Headers in Asp.Net Using C# and jQuery</h3>
    <div style="width: 450px;">
        <div id="controlHead">
        </div>
        <div style="height: 180px; overflow: auto">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" EmptyDataText="There are no data records to display."
                BorderStyle="Solid">
                <Columns>
                    <asp:BoundField DataField="author_name" HeaderText="NAME" />
                    <asp:BoundField DataField="publisher_name" HeaderText="PUBLISHER NAME" />
                    <asp:BoundField DataField="publication_year" HeaderText="PUBLISH YEAR" />
                    <asp:BoundField DataField="retail_price" HeaderText="PRICE" />
                </Columns>
                <HeaderStyle BackColor="#66CCFF" />
            </asp:GridView>
        </div>
    </div>
    </form>
</body>
</html>

Now we will bread the above code in different parts. In above code I have used jquery code to get the scrolling effect.

    <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 = $('#<%=GridView1.ClientID%>').clone(true);
            /*Code to remove first ror which is header row*/
            $(gridHeader).find("tr:gt(0)").remove();
            $('#<%=GridView1.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', $('#<%=GridView1.ClientID%>').offset().top);

        });
    </script>

Now we will check the code to bind the data.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.OleDb;
using System.Data;
namespace ProjectDemo_Asp.et
{
    public partial class Default : System.Web.UI.Page
    {
        public string connectionstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\\bookstore.mdb;Persist Security Info=False;";
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable _objdt = new DataTable();
            _objdt = GetDataFromDataBase();
            if (_objdt.Rows.Count > 0)
            {
                GridView1.DataSource = _objdt;
                GridView1.DataBind();
            }
        }

        /// <summary>
        /// Function for binding retribing the data from database
        /// </summary>
        /// <returns></returns>
        public DataTable GetDataFromDataBase()
        {
            DataTable _objdt = new DataTable();
            string querystring = "select * from Books;";
            OleDbConnection _objcon=new OleDbConnection(connectionstring);
            OleDbDataAdapter _objda = new OleDbDataAdapter(querystring, _objcon);
            _objcon.Open();
            _objda.Fill(_objdt);
            return _objdt;
        }
    }
}

Now we will run the page to check the output.





About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

3 comments:

  1. //this code testing in Firefox ver.39.0
    $(document).ready(function () {

    $(window).scroll(function () {
    var fixedheader = $('.FixedHeader');

    fixedheader.each(function (index, element) {
    var header = $(this);

    if ($(window).scrollTop() >= $(header).position().top) {
    var td = $('tbody tr:gt(1) td').eq(index);
    $(header).css({ 'position': 'fixed', 'top': '5px', 'left': $(td).position().left, 'width': $(td).width(), 'text-align': $(td).css('text-align') });
    }
    else {
    $(this).css({ 'position': 'relative', 'top': '0px', 'left': '0px', 'width': 'auto' });
    }
    });
    });

    ReplyDelete

  2. .FixedHeader {
    position: relative;
    background-color: #507CD1;
    font: bold small verdana;
    color: white;
    }

    ReplyDelete
  3. Code works but the the resulting fixed header is not responsive

    ReplyDelete

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top