Vishwamohan

Welcome to Vishwa's blog - Technology, Spirituality and More...

Freeze Column in GridView

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:

Comments (19) -

  • DocHolliday

    9/14/2008 12:04:56 AM | Reply

    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 | Reply

    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 | Reply

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

  • Khushi2005

    9/14/2008 5:56:18 PM | Reply

    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/15/2008 5:34:55 PM | Reply

    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/15/2008 5:36:35 PM | Reply

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

  • Nadeem

    1/30/2009 8:38:40 AM | Reply

    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 | Reply

    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 | Reply

    is it possible work in Firefox

  • yogi

    6/16/2009 1:14:54 AM | Reply

    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 | Reply

    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 | Reply

    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 | Reply

    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 | Reply

    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 | Reply

    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.

  • Sathish

    10/22/2012 6:36:25 AM | Reply

    Hai.. i am working with a project that involves freezing of rows and columns in gridview in asp.net. i tried your code. but its not working for me. so could u please mail me the entire solution file or upload it here.
    with regards

    sathish

  • san

    11/9/2012 12:38:28 AM | Reply

    this is very good article but is not working on IE7+ browsers.

  • Satya

    11/11/2012 9:07:09 PM | Reply

    I'm using ASP.NET 3.5. Gridview Freeze column DOES NOT  work in IE 8+ version.  Can you help with an updated version?

  • Poornima

    1/16/2013 6:39:20 PM | Reply

    Please could you tell how to freeze template column in datagrid.

Loading