Freeze Column in GridView

<< Find Permission on all objects | I Salute You Missile Man >>

Aug 3 2007

.NET

Design

The following example will demonstrate as how to freeze or fix one or more column in a GridView. I have used stylesheet to achieve this result. At present this solution only works in IE 7.0. The data source is a xml file containing product sales result.

This example freezes the first column “Product Name” and allows scrolling GridView horizontally to see monthly sales for each product.

XML Data Format: Sample File

<?xmlversion="1.0" encoding="utf-8" ?>

<ProductSales>

<Product ID="1" Name="Product 1" Year ="2007">

    <Jan>123,200</Jan>

    <Feb>333,300</Feb>

    <Mar>332,400</Mar>

    <Apr>222,200</Apr>

    <May>444,250</May>

    <Jun>234,300</Jun>

    <Jul>229,233</Jul>

    <Aug>111,333</Aug>

    <Sep>212,646</Sep>

    <Oct>423,266</Oct>

    <Nov>987,332</Nov>

    <Dec>282,234</Dec>

</Product>

</ProductSales>

Page Name: FreezeColumnGridView.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="FreezeColumnGridView.aspx.vb" Inherits="FreezeColumnGridView" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>Product Sales</title>



<%-- Ideally you can use the following link to have stylesheet as a separate file

    <link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" /> --%>



    <style type="text/css">



    body

    {

          font-family: Arial,Verdana, Helvetica;

          background-color:White;

    }

H2    {

          font-family: Arial,Verdana, Helvetica;

          font-size:    18px;

          font-weight:bold;

      }

.OddColumn

    {

        font-family: Arial,Verdana, Helvetica;

        font-size: 14px;

        font-weight: normal;

        border-style: solid;

        border-width: 1px;

        border-color: #999966;

        width:60px;

    }

.EvenColumn

    {

        font-family: Arial,Verdana, Helvetica;

        font-size: 14px;

        font-weight: normal;

        border-style: solid;

        border-width: 1px;

        border-color: #999966;

        width:60px;

        background-color:Silver;

    }

.StaticColumn

      {

          font-family: Arial,Verdana, Helvetica;

        font-size: 14px;

        font-weight: normal;

          border: none;

          position: relative;

      }



#GridViewContainer

    {

          overflow: scroll;

          margin-bottom: 14px;

          width:600px;

    }

.GridViewHeader

      {

            font-family: Arial,Verdana, Helvetica;

            font-size: 14px;

            font-weight:bold;

            color: black;

        background-color:#aaaadd;

    }

.GridViewRow

      {

            font-family: Arial,Verdana, Helvetica;

            font-size: 14px;

            color: black;

        background-color:#ccccff;

    }



.GridViewAltRow

      {

            font-family: Arial,Verdana, Helvetica;

            font-size: 14px;

            color: black;

            background-color:white;

    }



    </style>



</head>

<body>

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

        <h2>Freeze column in GridView</h2>

        <div id="GridViewContainer">

               <asp:GridView ID="gvwSales" runat="server" DataKeyNames="ID"

                EmptyDataText="No record found." AutoGenerateColumns="false" AllowPaging="False">

                       <RowStyle CssClass="GridViewRow" />

                       <AlternatingRowStyle CssClass="GridViewAltRow" />

                      <HeaderStyle CssClass="GridViewHeader" />

                        <Columns>

                               <asp:BoundField DataField="Name" HeaderText="Product Name" ReadOnly="true" ItemStyle-CssClass="StaticColumn" HeaderStyle-CssClass="StaticColumn"

                                                     HeaderStyle-Font-Bold="true" ItemStyle-Wrap="false" HeaderStyle-Wrap="false"/>

                               <asp:BoundField DataField="Jan" HeaderText="Jan" ReadOnly="true" ItemStyle-CssClass="EvenColumn" HeaderStyle-CssClass="EvenColumn" HeaderStyle-Font-Bold="true" />

                               <asp:BoundField DataField="Feb" HeaderText="Feb" ReadOnly="true" ItemStyle-CssClass="OddColumn" HeaderStyle-CssClass="OddColumn" HeaderStyle-Font-Bold="true"/>

                               <asp:BoundField DataField="Mar" HeaderText="Mar" ReadOnly="true" ItemStyle-CssClass="EvenColumn" HeaderStyle-CssClass="EvenColumn" HeaderStyle-Font-Bold="true"/>

                               <asp:BoundField DataField="Apr" HeaderText="Apr" ReadOnly="true" ItemStyle-CssClass="OddColumn" HeaderStyle-CssClass="OddColumn" HeaderStyle-Font-Bold="true"/>

                               <asp:BoundField DataField="May" HeaderText="May" ReadOnly="true" ItemStyle-CssClass="EvenColumn" HeaderStyle-CssClass="EvenColumn" HeaderStyle-Font-Bold="true"/>

                               <asp:BoundField DataField="Jun" HeaderText="Jun" ReadOnly="true" ItemStyle-CssClass="OddColumn" HeaderStyle-CssClass="OddColumn" HeaderStyle-Font-Bold="true"/>

                               <asp:BoundField DataField="Jul" HeaderText="Jul" ReadOnly="true" ItemStyle-CssClass="EvenColumn" HeaderStyle-CssClass="EvenColumn" HeaderStyle-Font-Bold="true"/>

                               <asp:BoundField DataField="Aug" HeaderText="Aug" ReadOnly="true" ItemStyle-CssClass="OddColumn" HeaderStyle-CssClass="OddColumn" HeaderStyle-Font-Bold="true"/>

                               <asp:BoundField DataField="Sep" HeaderText="Sep" ReadOnly="true" ItemStyle-CssClass="EvenColumn" HeaderStyle-CssClass="EvenColumn" HeaderStyle-Font-Bold="true"/>

                               <asp:BoundField DataField="Oct" HeaderText="Oct" ReadOnly="true" ItemStyle-CssClass="OddColumn" HeaderStyle-CssClass="OddColumn" HeaderStyle-Font-Bold="true"/>

                               <asp:BoundField DataField="Nov" HeaderText="Nov" ReadOnly="true" ItemStyle-CssClass="EvenColumn" HeaderStyle-CssClass="EvenColumn" HeaderStyle-Font-Bold="true"/>

                               <asp:BoundField DataField="Dec" HeaderText="Dec" ReadOnly="true" ItemStyle-CssClass="OddColumn" HeaderStyle-CssClass="OddColumn" HeaderStyle-Font-Bold="true"/>

                         </Columns>

                    </asp:GridView>

           </div>

    </form>

</body>

</html>

Code Behind : FreezeColumnGridView.aspx.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

            If Not Page.IsPostBack Then

                Dim salesData As New System.Data.DataSet

                salesData.ReadXml("C:\Example\Vishwa.Example.WebSite\App_Data\ProductSales.xml")

                Me.gvwSales.DataSource = salesData

                Me.gvwSales.DataBind()

            End If

        End Sub

Output at the runtime:

8c5ceafb-ce78-45d3-a426-0c07dccf63ea|6|3.2

Dynamic Gridview Generation at run timeIn this example, a Gridview is generated at run time with customer list with bound field columns. It...Speed Test: Generic List vs. ArrayListIt is very important to evaluate the most efficient way of passing data between layers. Many people ...Export GridView Data to MS-ExcelIn the following example, I will demonstrate how to export GridView Data into MS-Excel using VB.NET....

Comments

9/14/2008 12:04:56 AM #

If I need the columns header to stay while scrolling vertically, can you show me how ?
Thanks

DocHolliday

9/14/2008 12:36:20 AM #

How to lock columns at the top
Your code works nicely for freezing columns
I made few changes
in row data bound e.rows.cells[0].cssClass="Staticcolumn";

also it seems that when rows increase the Static Columns runs out of Div Container

Khushi2005

9/14/2008 12:48:28 AM #

I am sorry but where would I put this e.rows.cells[0].cssClass="Staticcolumn"; ?

DocHolliday

9/14/2008 5:56:18 PM #

Khushi2005

9/15/2008 5:34:55 PM #

Khushi2005

9/15/2008 5:36:35 PM #

Put e.rows.cells[0].cssClass="Staticcolumn"; in ROw Data bound Event for a Gridview

khushi2005

1/30/2009 8:38:40 AM #

Dear Mohan
I had gone thru the contents of the sample. it works fine when u need to fix ur column without a restriction of gridview's height. if we specify the height, the contents of first column come from the boundry of div/ gridview height.
so if u have some suggestion to solve this issue, along with header freezing,Please send to me.
Thanx for giving ur valuable time.

from
Nadeem kazmi
Jamshedpur, India.

Nadeem

3/5/2009 12:08:15 PM #

I Want to apply your Code in my App.I used TemplateField in Grid view and use SQL SERVER 2005 for database.how can I apply your code with this
combination

Sachin

5/6/2009 9:06:29 AM #

is it possible work in Firefox

senthil

6/16/2009 1:14:54 AM #

Hey, Try adding 8-10 items in product and use the below mentioned class for gridheader. the freeze column runs out of grid
#GridViewContainer
    {
          overflow: scroll;
          margin-bottom: 14px;
          width:200px;
          height:100px;
    }

How to solve this ?

yogi

6/16/2009 5:40:04 AM #

Yogi, It works fine for me,no issues, however I am using IE 8, not sure if the browser has to do anything.

Vishwa

1/10/2010 4:10:57 AM #

Hi all

please help me.... I wan to do this with IE 8, and i am using .net 3.5,
please tel me if any method i can usse fro this i awanto fraze 1st two column in my GridView
Thax
Rohan

rohan

3/17/2010 7:32:56 PM #

This works great in IE 6 and 7. But it doesn't in IE8 normal or compatability mode. The locking of the columns doesn't seem to occur and the grid comes outside the table. Any idea how to fix this?

ssiegel

3/24/2010 10:51:07 PM #

The above code works great in IE 6 & 7. But the Gridview Freeze column DOES NOT work in IE 8. Note I'm using ASP.NET 2.0 Can you help with an updated version?

stusiegel

3/25/2010 2:03:07 AM #

Friends, I post things as I come across, and if this helps you thats my goal. Any additional help or modification you need you can try on your own. Unless I have the need or reason to work on new situation, I will not be able to spend time on your change requests.

Vishwa

Add comment