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

Freeze Column in GridView

by Vishwa 4. August 2007 19:16

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

ProtectedSub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.Load

            IfNot Page.IsPostBack Then

                Dim salesData AsNew System.Data.DataSet

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

                Me.gvwSales.DataSource = salesData

                Me.gvwSales.DataBind()

            EndIf

        EndSub

Output at the runtime:

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

Tags: Design

.NET

GridView Cell click refreshes detail GridviewYou may have used Master and Detail Gridview to show selected row data in detail Gridview. But what ...Export GridView Data to CSV/Excel/XML formatMany times your customers will ask if they can export the Gridview data in one of the most popular f...Dynamic Gridview Generation at run timeIn this example, a Gridview is generated at run time with customer list with bound field columns. It...

Comments (15) -

DocHolliday

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

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

Khushi2005

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

DocHolliday

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

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

Khushi2005

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

Nadeem

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.

Sachin

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

senthil

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

is it possible work in Firefox

yogi

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 ?

Vishwa

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.

rohan

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

ssiegel

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?

stusiegel

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?

Vishwa

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.

Comments are closed

Freeze Column in GridView

Related posts

Comments (15) -

About Me

Flickr Photos

Calendar

Archive

Recent Posts

Recent Comments

Live Traffic Feed

	Hello,my name is Vishwa Mohan Kumar, PMP
I am a Software Architect. This blog is result of my experiments.

Mo	Tu	We	Th	Fr	Sa	Su
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

Mo	Tu	We	Th	Fr	Sa	Su
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

Freeze Column in GridView

Related posts

Comments (15) -

About Me

Categories

Flickr Photos

Calendar

Tags

Archive

Recent Posts

Recent Comments

Live Traffic Feed

Mo	Tu	We	Th	Fr	Sa	Su
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10