Click here to Skip to main content
12,823,625 members (48,986 online)
Rate this:
Please Sign up or sign in to vote.
See more: C# ASP.NET
Requirement :
GridView with Multiple Header rows.
When vertical scroll, headers freeezed (GridView rows only scrollable).

Is it possible? here is my code..


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollableGridWithFixedHeader.aspx.cs" Inherits="ScrollableDataGrid.ScrollableGridWithFixedHeader" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >
<head runat="server">
<script src="css/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="css/ScrollableGridPlugin.js" type="text/javascript"></script>
<title>Scrollable Grid with Fixed Header</title>
<style type="text/css">


<form id="form1" runat="server">

<asp:Button ID="btnGetData" Text="Get Data" runat="server" OnClick="OnGetDataClick"/>

<%-- <asp:panel ID="panelContainer" runat="server"
Width="100%" Height="400px">--%>
<asp:GridView ID="EmployeeGrid" runat="server" AutoGenerateColumns="true" DataKeyNames="Customer"
Font-Names="Times New Roman" BorderColor="Black" BorderStyle="Solid"
<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" />

<%-- --%>


cs Code is here:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;

namespace ScrollableDataGrid
public partial class ScrollableGridWithFixedHeader : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)

protected void EmployeeGrid_RowCreated(object sender, GridViewRowEventArgs e)

if (e.Row.RowType == DataControlRowType.Header)
//Creating a gridview object
GridView objGridView = (GridView)EmployeeGrid;

//Creating a gridview row object
GridViewRow HeaderGridRow = new GridViewRow(1, 0, DataControlRowType.Header, DataControlRowState.Insert);

//Creating a table cell object
TableCell HeaderCell = new TableCell();

HeaderCell = new TableCell();
HeaderCell.Text = "ODE Endtime";
HeaderCell.ColumnSpan = 3;

HeaderCell = new TableCell();
HeaderCell.Text = "RDE Endtime";
HeaderCell.ColumnSpan = 8;
//Add a blank cell at the first three cell headers
//This can be achieved by making the colspan property of the table cell object as 3
// and the text property of the table cell object will be blank
//Henceforth, add the table cell object to the grid view row object
//AddMergedCells(objgridviewrow, objtablecell, 3, "Employee Detail", System.Drawing.Color.LightGreen.Name);

//Merge columns d,e (i.e.Address, City, Region, Postal Code, Country) under the column name "Address Details"
//This can be achieved by making the colspan property of the table cell object as 2
//and setting it's text to "Address Details"
//Henceforth, add the table cell object to the grid view row object
//AddMergedCells(objgridviewrow, objtablecell, 2, "Address Details", System.Drawing.Color.LightSkyBlue.Name);

//AddMergedCells(objgridviewrow, objtablecell,4, "Address Specify", System.Drawing.Color.LightSkyBlue.Name);

//Lastly add the gridrow object to the gridview object at the 0th position
//Because,the header row position is 0.
//EmployeeGrid.Controls[0].Controls.AddAt(0, objGridView);
EmployeeGrid.Controls[0].Controls.AddAt(0, HeaderGridRow);


protected void OnGetDataClick(object sender, EventArgs e)
string ConnString = ConfigurationManager.ConnectionStrings["ConnStrForEVTS"].ConnectionString;
string SqlString = "select top 200 * from dbo.Daily_Abend_RDE_Rpt";
using (SqlConnection conn = new SqlConnection(ConnString))
using (SqlCommand cmd = new SqlCommand(SqlString, conn))
cmd.CommandType = CommandType.Text;
//cmd.Parameters.AddWithValue("FirstName", txtFirstName.Text);

using (SqlDataReader reader = cmd.ExecuteReader())
EmployeeGrid.DataSource = reader;


Please just let me now if the simple solution is exists or not? while we will do we have take care about the alignment of each record of respective column also.

Thanks in advanced :)
Posted 19-Feb-13 23:52pm
Updated 19-Feb-13 23:59pm
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Check this link if you have missed it:

Dynamic Multiple Row Column Grid Header[^]
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

maybe you can try my solution, i worte a jquery plug-in can be fixed header and freeze column.

It is working on:
Internet Explorer 7, 8 (IE 9 Compatibility)
Internet Explorer 9 (9.0.8112)
Internet Explorer 10 on Windows 7 Preview
Google Chrome(23.0.1271.64 m)
Mozilla Firefox (16.0.2)
Apple Safari (5.1.7)

Demo: HeaderColumnMerge

GridViewScroll with jQuery

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

    Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170308.1 | Last Updated 21 Feb 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100