GridView : Freezing First Columns and Freezing Column's Headers : The Official Microsoft ASP.NET Forums

Reply

mjohnen

Member

2 Points

8 Posts

GridView : Freezing First Columns and Freezing Column's Headers

Jun 09, 2007 03:49 PM|LINK

Hi

Looking for code that freezes the first two columns and the column's headers in a GridView, so as to give a similar behavior and the appearance of Excel, but in Visual Web Developer, I've found a link that show a very efficient solution, but applies just to a DataGrid control in IE. I've found lots of additional information in the web, but I think the best aproach is this...

http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

http://www.codeproject.com/aspnet/FreezePaneDatagrid.asp

Please, look at this alternative solution also... may be useful!

http://www.codeproject.com/useritems/FreezeHeader.asp

I'd appreciate if someone can send me a code example to help me apply this solution to a GridView instead of a DataGrid. I've tried to find the way to do it, but here I'm, asking for some advice.

Thank you very much!

Max

Edited by mjohnen on Jun 09, 2007 04:56 PM

Reply

Young Fang -...

All-Star

17147 Points

1620 Posts

Re: GridView : Freezing First Columns and Freezing Column's Headers

Jun 12, 2007 04:05 AM|LINK

Hi Max,

It is similar in GridView. Please try below 2 steps:

1 Add locked Css:

td.locked, th.locked {
position:relative;
left:expression((this.parentElement.parentElement.parentElement.parentElement.scrollLeft-2)+'px');
}

2 In RowDataBound event add css to GridView cell:

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Cells[0].CssClass = "locked";
        }
    }

Please feel free to let us know if you need more assistance.Thanks.

NOTE:If you find my response contains a reference to a third party World Wide Web site, I am providing this information as a convenience to you.Microsoft does not control these sites and has not tested any software or information found on these sites; therefore,Microsoft cannot make any representations regarding the quality,safety, or suitability of any software or information found there.
__________________________________________________

Sincerely,
Young Fang
Microsoft Online Community Support

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

Marked as answer by Allen Chen – MSFT on Jun 14, 2007 02:41 AM

Reply

Allen Chen –...

All-Star

40943 Points

4949 Posts

Re: GridView : Freezing First Columns and Freezing Column's Headers

Jun 12, 2007 07:23 AM|LINK

Hi:

Just try this:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        e.Row.Cells[0].CssClass = "locked";
        e.Row.Cells[1].CssClass = "locked";
    }

<head runat="server">
<title>Untitled Page</title>
<style type="text/css">

div#div-datagrid {
width: 220px;
height: 100px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

/* Locks the left column */
td.locked, th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*IE5+ only*/
left: expression(document.getElementById("div-datagrid").scrollLeft-2);
}

/* Locks table header */
th {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*IE5+ only*/
top: expression(document.getElementById("div-datagrid").scrollTop-2);
z-index: 10;
}

/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 99;}

/* DataGrid Item and AlternatingItem Style*/
.GridRow {font-size: 10pt; color: black; font-family: Arial;
background-color:#ffffff; height:35px;}
.GridAltRow {font-size: 10pt; color: black; font-family: Arial;
background-color:#eeeeee; height:35px;}
</style>
</head>

If it doesn't work, please inform us.

Regards

Sincerely,
Allen Chen
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Marked as answer by Allen Chen – MSFT on Jun 14, 2007 02:41 AM

Reply

mjohnen

Member

2 Points

8 Posts

Re: GridView : Freezing First Columns and Freezing Column's Headers

Jun 15, 2007 04:28 PM|LINK

I'll try this code and see what happens.

Thank you very much for your advices!!

Max

Reply

mjohnen

Member

2 Points

8 Posts

Re: GridView : Freezing First Columns and Freezing Column's Headers

Jun 15, 2007 05:20 PM|LINK

Hi Allen:

Sorry I'm bothering you again, but your advices worked fine and your code were very useful, without doubt.

Your code's working well in my Gridview. The header get freezed for vertical scrolling and the two first Columns get also frrezed to horizontal scrolling.

That's nice!

But there's still a problem.

I can't get the header freezed to horizontal scrolling. Please look at my code (attatched).

I'd appreciate if you find out what I'm doing wrong.

For my project functionality, I need the header to be freezed at horizontal scrolling.

I really appreciate your help!

Thanks a lot!

I'll be in touch!

Regards, Max

1) This is the Stylesheet (Css):

/* Div container to wrap the datagrid */

div#div-datagrid {

width: 420px;

height: 200px;

overflow: auto;

scrollbar-base-color:#ffeaff;

}

/* Locks the left column */

td.locked, th.locked {

font-size: 7pt;

text-align: left;

background-color:inherit;

color:Black;

position:relative;

cursor: default;

left: expression(document.getElementById("div-datagrid").scrollLeft-2); /*IE5+ only*/

}

/* Locks table header */

th {

font-size: 7pt;

font-weight: bold;

text-align: center;

background-color: navy;

color: white;

height:15pt;

border-right: 1px solid silver;

position:relative;

cursor: default;

top: expression(document.getElementById("div-datagrid").scrollTop-2); /*IE5+ only*/

z-index: 10;

}

/* Keeps the header as the top most item. Important for top left item*/

th.locked {z-index: 99;}

/* DataGrid Item and AlternatingItem Style*/

.GridRow {font-size: 7pt; color: black; font-family: Verdana; background-color:#ffffff; height:15px;}

.GridAltRow {font-size: 7pt; color: black; font-family: Verdana; background-color:#eeeeee; height:15px;}

2) This is the Html Code...

<%@ Page Language="VB" MasterPageFile="~/M00.master" AutoEventWireup="false" CodeFile="Page00.aspx.vb" Inherits="Page00" title="Untitled Page" %>

<%@ Register Assembly="Controls" Namespace="Tittle.Controls" TagPrefix="Tittle" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="System.Web.UI" TagPrefix="asp" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div style="z-index: 101; left: 11px; width: 930px; position: absolute; top: 52px;

height: 560px; border-right: #cccccc thin ridge; border-top: #cccccc thin ridge; background-image: url(App_GlobalResources/FondoCircuito.gif); border-left: #cccccc thin ridge; border-bottom: #cccccc thin ridge; background-repeat: repeat; background-attachment: fixed;">

<asp:Label ID="PaginacionLabel" runat="server" CssClass="rotulos" Style="z-index: 100;

left: 368px; position: absolute; top: 5px" Text="Paginaci¢n General" Width="194px"></asp:Label>

</span>

<asp:TextBox ID="SearchKey0" runat="server" CssClass="campos" Style="z-index: 101;

left: 162px; position: absolute; top: 43px" Width="110px" TabIndex="2"></asp:TextBox>

<asp:TextBox ID="SearchKey1" runat="server" Style="z-index: 102; left: 21px; position: absolute;

top: 43px" TabIndex="1" Width="132px"></asp:TextBox>

<asp:Button ID="SearchButton" runat="server" CssClass="botones" Style="z-index: 103;

left: 283px; position: absolute; top: 42px" Text="Buscar" Width="70px" Height="24px" TabIndex="3" />

<asp:DropDownList ID="RowDeploy" runat="server" Style="z-index: 104; left: 551px;

position: absolute; top: 43px" CssClass="campos" TabIndex="12" Width="53px" AutoPostBack="True">

<asp:ListItem>20</asp:ListItem>

<asp:ListItem>50</asp:ListItem>

<asp:ListItem>100</asp:ListItem>

<asp:ListItem>200</asp:ListItem>

<asp:ListItem>500</asp:ListItem>

<asp:ListItem>1000</asp:ListItem>

</asp:DropDownList>

<asp:Label ID="RowsLabel" runat="server" Style="z-index: 105; left: 515px; position: absolute;

top: 46px" Text="Filas?" Width="48px" CssClass="prompt"></asp:Label>

<asp:Button ID="firstButton" runat="server" CssClass="botones" Style="z-index: 106;

left: 374px; position: absolute; top: 44px" Text="<<" Width="35px" TabIndex="4" Font-Bold="True" ForeColor="#000033" />

<asp:Button ID="prevButton" runat="server" CssClass="botones" Style="z-index: 107;

left: 413px; position: absolute; top: 44px" Text="<" Width="22px" TabIndex="5" Font-Bold="True" ForeColor="#000033" />

<asp:Button ID="nextButton" runat="server" CssClass="botones" Style="z-index: 108;

left: 439px; position: absolute; top: 44px" Text=">" Width="21px" TabIndex="6" Font-Bold="True" ForeColor="#000033" />

<asp:Button ID="lastButton" runat="server" CssClass="botones" Style="z-index: 109;

left: 464px; position: absolute; top: 44px" Text=">>" Width="35px" TabIndex="7" Font-Bold="True" ForeColor="#000033" />

<asp:Button ID="ExcellButton" runat="server" CssClass="botones" Style="z-index: 110;

left: 818px; position: absolute; top: 44px" Text="Excel" Width="61px" />

        <br />

<asp:Button ID="Button1" runat="server" Style="z-index: 111; left: 607px; position: absolute;

top: 44px" Text="F" Width="30px" Height="21px" />

   <br />

<asp:Label ID="LabelMensajes" runat="server" Font-Bold="True" Font-Names="verdanaa"

Font-Size="X-Small" ForeColor="Red" Style="z-index: 112; left: 26px; position: absolute;

top: 27px"></asp:Label>

  <br />

<asp:GridView ID="GridContactos" runat="server" AutoGenerateColumns=False style="z-index: 100; left: 2px; position: absolute; top: 2px" Font-Bold="False" Font-Italic="False" Font-Names="Verdana" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" Width="634px" Height="219px" GridLines="None" DataKeyNames="ContactID" TabIndex="2">

<asp:CommandField SelectText="S" ShowSelectButton="True" />

<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />

<asp:BoundField DataField="ContactID" HeaderText="ContactID" InsertVisible="False"

ReadOnly="True" SortExpression="ContactID" />

<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />

<asp:BoundField DataField="EmailAddress" HeaderText="EmailAddress" SortExpression="EmailAddress" />

<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />

</Columns>

</asp:GridView>

</div>

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" BackColor="White"

BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1"

DataKeyNames="ContactID" DataSourceID="SqlDataSource1" GridLines="None" HeaderText="Detalle de Contacto"

Height="379px" Style="z-index: 114; left: 511px; position: absolute; top: 71px"

Width="366px" TabIndex="1">

<asp:BoundField DataField="ContactID" HeaderText="ContactID" InsertVisible="False"

ReadOnly="True" SortExpression="ContactID" />

<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />

<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />

<asp:CheckBoxField DataField="NameStyle" HeaderText="NameStyle" SortExpression="NameStyle" />

<asp:BoundField DataField="EmailAddress" HeaderText="EmailAddress" SortExpression="EmailAddress" />

<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />

<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />

<asp:BoundField DataField="MiddleName" HeaderText="MiddleName" SortExpression="MiddleName" />

<asp:BoundField DataField="Suffix" HeaderText="Suffix" SortExpression="Suffix" />

<asp:BoundField DataField="EmailPromotion" HeaderText="EmailPromotion" SortExpression="EmailPromotion" />

<asp:BoundField DataField="ModifiedDate" HeaderText="ModifiedDate" SortExpression="ModifiedDate" />

<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowInsertButton="True" />

</Fields>

</asp:DetailsView>

</div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:ContactosConnectionString %>" DeleteCommand="DELETE FROM [Contactos] WHERE [ContactID] = @original_ContactID"

InsertCommand="INSERT INTO [Contactos] ([NameStyle], [Title], [FirstName], [MiddleName], [LastName], [Suffix], [EmailAddress], [EmailPromotion], [Phone], [ModifiedDate]) VALUES (@NameStyle, @Title, @FirstName, @MiddleName, @LastName, @Suffix, @EmailAddress, @EmailPromotion, @Phone, @ModifiedDate)"

OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT * FROM [Contactos] WHERE ([ContactID] = @ContactID)"

UpdateCommand="UPDATE [Contactos] SET [NameStyle] = @NameStyle, [Title] = @Title, [FirstName] = @FirstName, [MiddleName] = @MiddleName, [LastName] = @LastName, [Suffix] = @Suffix, [EmailAddress] = @EmailAddress, [EmailPromotion] = @EmailPromotion, [Phone] = @Phone, [ModifiedDate] = @ModifiedDate WHERE [ContactID] = @original_ContactID">

<asp:Parameter Name="original_ContactID" Type="Int32" />

</DeleteParameters>

<asp:Parameter Name="NameStyle" Type="Boolean" />

<asp:Parameter Name="Title" Type="String" />

<asp:Parameter Name="FirstName" Type="String" />

<asp:Parameter Name="MiddleName" Type="String" />

<asp:Parameter Name="LastName" Type="String" />

<asp:Parameter Name="Suffix" Type="String" />

<asp:Parameter Name="EmailAddress" Type="String" />

<asp:Parameter Name="EmailPromotion" Type="Int32" />

<asp:Parameter Name="Phone" Type="String" />

<asp:Parameter Name="ModifiedDate" Type="DateTime" />

<asp:Parameter Name="original_ContactID" Type="Int32" />

</UpdateParameters>

<asp:Parameter Name="NameStyle" Type="Boolean" />

<asp:Parameter Name="Title" Type="String" />

<asp:Parameter Name="FirstName" Type="String" />

<asp:Parameter Name="MiddleName" Type="String" />

<asp:Parameter Name="LastName" Type="String" />

<asp:Parameter Name="Suffix" Type="String" />

<asp:Parameter Name="EmailAddress" Type="String" />

<asp:Parameter Name="EmailPromotion" Type="Int32" />

<asp:Parameter Name="Phone" Type="String" />

<asp:Parameter Name="ModifiedDate" Type="DateTime" />

</InsertParameters>

<asp:SessionParameter Name="ContactID" SessionField="ContactID" Type="Int32" />

</SelectParameters>

</asp:SqlDataSource>

 <br />

</div>

<asp:Label ID="TopLastName" runat="server" Style="z-index: 101; left: 44px; position: absolute;

top: 707px" Visible="False"></asp:Label>

<br />

<asp:Label ID="TopContactID" runat="server" Style="z-index: 100; left: 436px; position: absolute;

top: 706px" Visible="False"></asp:Label>

<br />

<asp:Label ID="BottomLastName" runat="server" Style="z-index: 102; left: 136px; position: absolute;

top: 707px" Visible="False"></asp:Label>

<br />

<asp:Label ID="BottomContactID" runat="server" Style="z-index: 104; left: 249px; position: absolute;

top: 709px" Visible="False"></asp:Label>

<br />

<asp:Label ID="UpdateKEY" runat="server" Style="z-index: 114; left: 361px; position: absolute;

top: 708px" Visible="False"></asp:Label>

</asp:Content>

3) This is my VBScript Event handling code...

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

Freeze()

End Sub

Sub Freeze()

Dim Locked As Integer = Session("Locked")

Dim I As Integer = 0

Dim J As Integer = Session("Filas")

Select Case Locked

Case 0

If J <= 100 Then

For I = 0 To J - 1

GridContactos.HeaderStyle.CssClass = "locked"

GridContactos.Rows(I).Cells(0).CssClass = "locked"

GridContactos.Rows(I).Cells(1).CssClass = "locked"

GridContactos.Rows(I).Cells(2).CssClass = "locked"

LabelMensajes.Text = "Primeras dos columnas est n Fijas..."

Else

LabelMensajes.Text = "No 'congelar' columnas si pagina tiene m s de 100 filas... Gracias!"

End If

Case 1

For I = 0 To J - 1

GridContactos.HeaderStyle.CssClass = "Unlocked"

GridContactos.Rows(I).Cells(0).CssClass = "Unlocked"

GridContactos.Rows(I).Cells(1).CssClass = "Unlocked"

GridContactos.Rows(I).Cells(2).CssClass = "Unlocked"

LabelMensajes.Text = ""

End Select

End Sub

Reply

Allen Chen –...

All-Star

40943 Points

4949 Posts

Re: GridView : Freezing First Columns and Freezing Column's Headers

Jun 18, 2007 07:30 AM|LINK

Hi:

We can add this bold one to freeze the left of the th:

th {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*IE5+ only*/
left: expression(document.getElementById("div-datagrid").scrollLeft-2);
top: expression(document.getElementById("div-datagrid").scrollTop-2);
z-index: 10;
}

If it doesn't work, please inform us.

Regards

Sincerely,
Allen Chen
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Reply

vishwa

Member

161 Points

47 Posts

Re: GridView : Freezing First Columns and Freezing Column's Headers

Aug 04, 2007 04:49 AM|LINK

I came up with a very simple solution using stylesheet. You can check it out on following link.

http://www.vishwamohan.com/ShowArticle.aspx?ArticleID=37

Vishwa

My Web Site and Blog

Reply

wooper

Member

10 Points

48 Posts

Re: GridView : Freezing First Columns and Freezing Column's Headers

Oct 20, 2008 11:12 PM|LINK

Hi there, I was searching for a solution of the freezing columns in gridview and I so this, the code works fine, the one in the codeproject page, but i have a problem, when i have alot of that it gets so slow,

and its almost imposible to move the scroll fast because the hole page gets freeze, so anybody has a better solution?? thanks

Reply

zell71

Member

29 Points

47 Posts

Re: GridView : Freezing First Columns and Freezing Column's Headers

Apr 14, 2009 10:47 AM|LINK

Hi allen, just read and implemented this solution you wrote however it works great..but the frozen panes are outside the table i have my gridview in (gridview added to panel to gain access to scroll bars).

Basically, the data thats not frozen sits inside the panel but the frozen panes don't abide by the panel..

Can you assist?

Reply

Leima

Member

13 Points

41 Posts

Re: GridView : Freezing First Columns and Freezing Column's Headers

Sep 22, 2009 06:49 PM|LINK

Hi, I was looking for a code like this, not exactly a gridview since I'm using a schedulle general but it basically works the same way, now my question is, are there any changes that need to be made to this code so that it will work on IE8?, because it's not freezing the columns unless i switch to compatibility view so I'm guessing the css class is not working in this version.

tnx for the help

GridView : Freezing First Columns and Freezing Column's Headers RSS

17 replies

mjohnen

GridView : Freezing First Columns and Freezing Column's Headers

Young Fang -...

Re: GridView : Freezing First Columns and Freezing Column's Headers

Allen Chen –...

Re: GridView : Freezing First Columns and Freezing Column's Headers

mjohnen

Re: GridView : Freezing First Columns and Freezing Column's Headers

mjohnen

Re: GridView : Freezing First Columns and Freezing Column's Headers

Allen Chen –...

Re: GridView : Freezing First Columns and Freezing Column's Headers

vishwa

Re: GridView : Freezing First Columns and Freezing Column's Headers

wooper

Re: GridView : Freezing First Columns and Freezing Column's Headers

zell71

Re: GridView : Freezing First Columns and Freezing Column's Headers

Leima

Re: GridView : Freezing First Columns and Freezing Column's Headers

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft