How to freeze Gridview columns in ASP.net?

I am writing below blog from one of my last project experience. I was doing a project called timesheet where i was in need of showing lots of details of the user whose timesheet is been submitted. For Example: Name, DOB, Department, Type, Designation and all the 30/31 days of the months.

Since it became difficult to show all the information in gridview becuase there is no built in functionality of scrolling. So I thought of freezing some of the columns of the gridview and keeping all other columns as it is.

I used CSS to handle this.

Find below the html:

<style type="text/css">

.Container

{

overflow: auto;

}

.FreezeCell

{

background-color:#d9e9ff;

position: relative;

font-family:Segoe UI;

font-size:11px;

font-weight:normal;

cursor: auto;

left: expression(document.getElementById("GridView1").scrollLeft-1);

}

.FreezeHeader

{

background-color:#d9e9ff;

font-weight:normal;

font-family:Segoe UI;

font-size:11px;

position: relative;

cursor: auto;

top: expression(document.getElementById("GridView1").scrollTop-1);

z-index: 10;

}

.FreezeHeader.locked

{

z-index: 99;

}

style>

<div id="div1" class="Container" style="width: 200px; color: #4977bc;

border-style: solid; border-width: thin;" runat="server">

<asp:GridView ID="GridView1" CssClass="GridView" runat="server" Width="250px"

GridLines="Both" BorderWidth="1px" AutoGenerateColumns="false">

<HeaderStyle BackColor="#d9e9ff" Font-Bold="false" Font-Names="Segoe UI" Font-Size="11px" />

<Columns>

<asp:BoundField DataField="name" HeaderText="Name" HeaderStyle-Width="100px" ItemStyle-CssClass="FreezeCell"

HeaderStyle-CssClass="FreezeCell">

<ItemStyle VerticalAlign="Top" BackColor="#ffffff" Width="100px"/>

asp:BoundField>

<asp:BoundField DataField="age" HeaderText="Age" HeaderStyle-Width="50px" >

<ItemStyle VerticalAlign="Top" Width="50px" HorizontalAlign="center" BackColor="#ffffff" />

asp:BoundField>

<asp:BoundField DataField="sex" HeaderText="Sex" HeaderStyle-Width="50px"

HeaderStyle-HorizontalAlign="left">

<ItemStyle VerticalAlign="Top" Width="50px" HorizontalAlign="left" BackColor="#ffffff" />

asp:BoundField>

<asp:BoundField DataField="datetime" HeaderText="DateTime" HeaderStyle-Width="15px"

HeaderStyle-HorizontalAlign="left">

<ItemStyle VerticalAlign="Top" Width="150px" HorizontalAlign="left" BackColor="#ffffff" />

asp:BoundField>

Columns>

asp:GridView>

div>

C# Source Code:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Collections.Generic;

public class PersonInfo

{

private string name;

public string Name

{

get { return name; }

set { name = value; }

}

private string age;

public string Age

{

get { return age; }

set { age = value; }

}

private string sex;

public string Sex

{

get { return sex; }

set { sex = value; }

}

private DateTime datetime;

public DateTime DateTime

{

get { return datetime; }

set { datetime = value; }

}

}

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

List<PersonInfo> listPersonInfo = new List<PersonInfo>();

for (int i = 0; i <>

{

PersonInfo p = new PersonInfo();

p.Name = "Ashraf" + i.ToString();

p.Age = "23" + i.ToString();

p.Sex = "Male";

p.DateTime = DateTime.Now;

listPersonInfo.Add(p);

}

GridView1.DataSource = listPersonInfo;

GridView1.DataBind();

}

}

}

This works perfectly for me.