Freeze Column in GridView

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

Aug 3 2007

.NET

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 10:04:56 AM #

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

DocHolliday

9/14/2008 10: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 10:48:28 AM #

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

DocHolliday

9/15/2008 3:56:18 AM #

Khushi2005

9/16/2008 3:34:55 AM #

Khushi2005

9/16/2008 3:36:35 AM #

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

khushi2005

1/30/2009 6:38:40 PM #

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 10: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 7:06:29 PM #

is it possible work in Firefox

senthil

6/16/2009 11: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 3:40:04 PM #

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 2:10:57 PM #

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