Click here to Skip to main content
15,860,861 members
Articles / Web Development / ASP.NET

Grid View with Fixed Header

Rate me:
Please Sign up or sign in to vote.
4.82/5 (50 votes)
11 Mar 2010CPOL4 min read 280.3K   11.9K   87   71
This article provides you with the solution of scrolling Grid View with fixed Header in ASP.NET.

Introduction

GridView control of ASP.NET 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.

In this article, I am trying to solve the problem of scrolling headers in ASP.NET GridView control.

This article will fulfill the following requirements:

  • GridView will have fixed header.
  • GridView can be scrolled horizontally.
  • GridView can be scrolled vertically.

GridViewWithFixedHeader.png

Overview

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.

Since, the Div control has the ability to scroll horizontally and vertically, therefore, to achieve scrolling in GridView, we have to wrap the GridView in the Div control. It is the Div that actually scrolls, but it looks like the GridView is scrolling.

Wrapping the GridView in a Div (say DataDiv) and making the DataDiv overflow property to auto solves the problem of scrolling in GridView, but one problem is that the header of the GridView also scrolls up while scrolling it vertically (this is because, the DataDiv is actually scrolling but not the GridView).

To get the solution of this problem, put another Div (say HeaderDiv) above DataDiv.

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.

At this point, we will have header (new HTML table) and GridView as different entities.

Since, header and GridView both are different entities; therefore, one thing which is still left is how to scroll the header while scrolling the GridView horizontally. This job will be done by a JavaScript function (say Onscrollfnction ()) which will be executed at the scroll event of the DataDiv. This function will scroll the HeaderDiv along with the DataDiv while scrolling in the horizontal direction.

Objective

The main objective behind the overall exercise is to create the new table (which contains the new header row) above the GridView with the similar style attributes of the original header and hides the original header of GridView.

Using the Code

  1. The first thing we have to do is to put the GridView inside the Div tag and also define a Header Div which will contain the new Header as follows:
    ASP.NET
    <%--Div contains the new header of the GridView--%>
    <div id="HeaderDiv">
    </div>
    <%--Wrapper Div which will scroll the GridView--%>
    <div id="DataDiv" style="overflow: auto; border: 1px solid olive;
      width: 600px; height: 300px;" onscroll="Onscrollfnction();">
         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true"
                CellPadding="6" CssClass="GridViewStyle">
                <HeaderStyle  CssClass="GridViewHeaderStyle" />
          </asp:GridView>
     </div>
    

    Please note the following points in the above code:

    1. GridView1 is the GridView which contains the data.
    2. DataDiv will make the GridView scrollable (horizontally as well as vertically). To make it scrollable, we have to set its overflow property to auto.
    3. I put a JavaScript function say Onscrollfnction () on DataDiv scrolling. This function will be executed every time when the DataDiv scrolls. The main idea behind this function is to scroll the HeaderDiv along with the DataDiv.
    4. HeaderDiv will contain the new header for GridView.
    5. Except this, other styling is not necessary. I just use all other styling for display purposes.
  2. In the second step, write a JavaScript function Onscrollfnction(), which will be executed when you scroll the DataDiv horizontally.
    JavaScript
    function Onscrollfnction()
    {
        var div = document.getElementById('DataDiv');
        var div2= document.getElementById('HeaderDiv');
        //****** Scrolling HeaderDiv along with DataDiv ******
        div2.scrollLeft = div.scrollLeft;
        return false;
    }
    

    This function will scroll the HeaderDiv along with the DataDiv while scrolling in horizontal direction.

  3. The third step is to write a Javascript function CreateGridHeader(). This function will create a new header table for the GridView in HeaderDiv and hides the original header. This function also resolves the style issues between HeaderDiv and DataDiv. This function will be called every time after filling the GridView with data as well as on the Page Load.
    JavaScript
    function CreateGridHeader(DataDiv, GridView1, HeaderDiv)
    {
        var DataDivObj = document.getElementById(DataDiv);
        var DataGridObj = document.getElementById(GridView1);
        var HeaderDivObj = document.getElementById(HeaderDiv);
        //********* Creating new table which contains the header row ***********
        var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
        DataDivObj.style.paddingTop = '0px';
        var DataDivWidth = DataDivObj.clientWidth;
        DataDivObj.style.width = '5000px';
        //********** Setting the style of Header Div as per the Data Div ************
        HeaderDivObj.className = DataDivObj.className;
        HeaderDivObj.style.cssText = DataDivObj.style.cssText;
        //**** Making the Header Div scrollable. *****
        HeaderDivObj.style.overflow = 'auto';
        //*** Hiding the horizontal scroll bar of Header Div ****
        //*** this is because we have to scroll the Div along with the DataDiv.
        HeaderDivObj.style.overflowX = 'hidden';
        //**** Hiding the vertical scroll bar of Header Div ****
        HeaderDivObj.style.overflowY = 'hidden';
        HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 'px';
        //**** Removing any border between Header Div and Data Div ****
        HeaderDivObj.style.borderBottomWidth = '0px';
        //********** Setting the style of Header Table as per the GridView ************
        HeadertableObj.className = DataGridObj.className;
        //**** Setting the Headertable css text as per the GridView css text
        HeadertableObj.style.cssText = DataGridObj.style.cssText;
        HeadertableObj.border = '1px';
        HeadertableObj.rules = 'all';
        HeadertableObj.cellPadding = DataGridObj.cellPadding;
        HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
        //********** Creating the new header row **********
        var Row = HeadertableObj.insertRow(0);
        Row.className = DataGridObj.rows[0].className;
        Row.style.cssText = DataGridObj.rows[0].style.cssText;
        Row.style.fontWeight = 'bold';
        //******** This loop will create each header cell *********
        for(var iCntr =0; iCntr < DataGridObj.rows[0].cells.length; iCntr++)
        {
            var spanTag = Row.appendChild(document.createElement('td'));
            spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
            var width = 0;
            //****** Setting the width of Header Cell **********
            if(spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth)
            {
                width = spanTag.clientWidth;
            }
            else
            {
                width = DataGridObj.rows[1].cells[iCntr].clientWidth;
            }
            if(iCntr<=DataGridObj.rows[0].cells.length-2)
            {
                spanTag.style.width = width + 'px';
            }
            else
            {
                spanTag.style.width = width + 20 + 'px';
            }
            DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';
        }
        var tableWidth = DataGridObj.clientWidth;
        //********* Hidding the original header of GridView *******
        DataGridObj.rows[0].style.display = 'none';
        //********* Setting the same width of all the components **********
        HeaderDivObj.style.width = DataDivWidth + 'px';
        DataDivObj.style.width = DataDivWidth + 'px';
        DataGridObj.style.width = tableWidth + 'px';
        HeadertableObj.style.width = tableWidth + 20 + 'px';
        return false;
    }
    

    This function will take three parameters DataDiv, GridView, and HeaderDiv. This function needs to be called from the server side every time the Grid is filled with data and also on the Page Load.

  4. The final step is to fill the GridView with Data and call the JavaScript function CreateGridHeader () from server side. This JavaScript function is also called on page load.
    C#
    string conString = "Provider=Microsoft.JET.OLEDB.4.0; 
    data source=" + Server.MapPath (string.Empty)  + @"\Database\Northwind.mdb";
    string sqlString = "SELECT * FROM CUSTOMERS";
    OleDbConnection conn = new OleDbConnection(conString);
    DataSet ds = new DataSet();
    OleDbDataAdapter adapter = new OleDbDataAdapter(sqlString, conn);
    adapter.Fill(ds);
    GridView1.DataSource = ds.Tables[0];
    GridView1.DataBind();
    ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", 
    "<script>CreateGridHeader('DataDiv', 'GridView1', 'HeaderDiv');</script>");
  5. The CreateGridHeader () function needs to be called on Page Load also.
    C#
    protected void Page_Load(object sender, EventArgs e)
    {
          if (GridView1.Rows.Count > 0)
         {
              ClientScript.RegisterStartupScript(this.GetType(),
           "CreateGridHeader",
                   "<script>CreateGridHeader('DataDiv', 'GridView1',
           'HeaderDiv');</script>");
         }
    }
    

You are now ready with the GridView with fixed headers.

Points of Interest

This solution is tested well with Internet Explorer, Mozilla Firefox, and Google Chrome.

History

  • Updated on 5-March-2010

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect Inca Informatics
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionFreeze header along with horizontal and vertical scroll - if we define width =100% for datadiv, then there is a space with vertical scroll and content Pin
Member 149621074-Mar-21 22:34
Member 149621074-Mar-21 22:34 
AnswerRe: Freeze header along with horizontal and vertical scroll - if we define width =100% for datadiv, then there is a space with vertical scroll and content Pin
Member 1496210710-Mar-21 3:09
Member 1496210710-Mar-21 3:09 
QuestionScrollable Gridview Pin
Member 116364406-Dec-19 5:06
Member 116364406-Dec-19 5:06 
QuestionNeed word wrapping for gridview column Pin
Sudhavamsikiran Damojipurapu11-Aug-16 5:03
Sudhavamsikiran Damojipurapu11-Aug-16 5:03 
Generalusing site master... Pin
Member 1112581429-Jan-16 8:17
Member 1112581429-Jan-16 8:17 
QuestionERROR Pin
dharshuu3-Nov-14 22:44
dharshuu3-Nov-14 22:44 
QuestionReg : Window Resize Pin
Karthik Devaraj23-May-14 23:21
Karthik Devaraj23-May-14 23:21 
QuestionCreateGridHeader not working on IE 9 Pin
garima sidher24-Feb-14 17:17
garima sidher24-Feb-14 17:17 
Generalworks great Pin
keremkocal26-Dec-13 4:45
keremkocal26-Dec-13 4:45 
Questionfixed header grid view with ability of select button Pin
Member 100642883-Nov-13 20:35
Member 100642883-Nov-13 20:35 
GeneralReg. Thanks Pin
rajabe10-Oct-13 19:51
rajabe10-Oct-13 19:51 
GeneralMy vote of 5 Pin
hsakarp4-Sep-13 3:36
hsakarp4-Sep-13 3:36 
QuestionNot Working Pin
Hitesh Vaghasiya15-Aug-13 20:11
Hitesh Vaghasiya15-Aug-13 20:11 
GeneralMy vote of 3 Pin
Member Kumar Nadar29-Jul-13 21:45
professionalMember Kumar Nadar29-Jul-13 21:45 
GeneralMy vote of 5 Pin
P. Gopinathan9-Jul-13 20:20
P. Gopinathan9-Jul-13 20:20 
Questionproblem: selected index changed event is firing only once Pin
GBVSivaRamKumar20-Mar-13 0:16
GBVSivaRamKumar20-Mar-13 0:16 
QuestionHeader not visible on page load Pin
ixashish4-Feb-13 19:31
ixashish4-Feb-13 19:31 
QuestionDemo file is correct ? Pin
Matin11021-Jan-13 6:52
Matin11021-Jan-13 6:52 
QuestionFreeze 1st 4 columns of Gridview along with Frozen headers Pin
sarada ganesh9-Nov-12 5:12
sarada ganesh9-Nov-12 5:12 
QuestionIE9 fix Pin
gringoman130-Oct-12 2:59
gringoman130-Oct-12 2:59 
AnswerRe: IE9 fix Pin
Tony Dong13-Feb-13 12:29
Tony Dong13-Feb-13 12:29 
GeneralMy vote of 4 Pin
FlyntMD25-Oct-12 7:39
FlyntMD25-Oct-12 7:39 
GeneralMy vote of 5 Pin
wsc091826-Aug-12 22:06
wsc091826-Aug-12 22:06 
GeneralMy vote of 5 Pin
Nitin Jain 100521-Jun-12 7:22
Nitin Jain 100521-Jun-12 7:22 
QuestionUsing in Masterpage Pin
Bpwill18-Jun-12 7:51
Bpwill18-Jun-12 7:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.