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...
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.
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.
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.
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"
Next
Session("Locked") = 1
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
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
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..
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.
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
freeze panes GridView asp.net advanced ASP.net 2.0 GridView
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.
__________________________________________________
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.
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>
<div id="div-datagrid">
<asp:GridView DataSourceID="SqlDataSource1" ID="GridView1" runat="server" OnRowCreated="GridView1_RowCreated" OnRowDataBound="GridView1_RowDataBound">
</asp:GridView> </div>
If it doesn't work, please inform us.
Regards
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.
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
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;">
<span style="font-size: 12pt"> <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 /> <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 /> <br /> <br /> <br /> <br /> <div id="div-datagrid" style="z-index: 115; left: 22px; width: 478px; position: absolute; top: 72px; height: 380px; " class="panel"> <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"> <AlternatingRowStyle CssClass="GridAltRow" Wrap="False"></AlternatingRowStyle> <RowStyle CssClass="GridRow" Wrap="False"></RowStyle> <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" /> <FooterStyle Wrap="False" /> <PagerStyle Wrap="False" /> <Columns> <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> <div id="DetalisView"> <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"> <FooterStyle BackColor="#00C0C0" Font-Bold="True" ForeColor="Black" Font-Size="Small" /> <EditRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#DEDFDE" ForeColor="Black" /> <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" /> <Fields> <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> <HeaderStyle BackColor="Navy" Font-Bold="True" ForeColor="White" HorizontalAlign="Center" Height="8px" /> </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"> <DeleteParameters> <asp:Parameter Name="original_ContactID" Type="Int32" /> </DeleteParameters> <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" /> <asp:Parameter Name="original_ContactID" Type="Int32" /> </UpdateParameters> <InsertParameters> <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> <SelectParameters> <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.ClickFreeze()
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 - 1GridContactos.HeaderStyle.CssClass =
"locked"GridContactos.Rows(I).Cells(0).CssClass =
"locked"GridContactos.Rows(I).Cells(1).CssClass =
"locked"GridContactos.Rows(I).Cells(2).CssClass =
"locked" Next Session("Locked") = 1LabelMensajes.Text =
"Primeras dos columnas est n Fijas..." ElseLabelMensajes.Text =
"No 'congelar' columnas si pagina tiene m s de 100 filas... Gracias!" End If Case 1 For I = 0 To J - 1GridContactos.HeaderStyle.CssClass =
"Unlocked"GridContactos.Rows(I).Cells(0).CssClass =
"Unlocked"GridContactos.Rows(I).Cells(1).CssClass =
"Unlocked"GridContactos.Rows(I).Cells(2).CssClass =
"Unlocked" Next Session("Locked") = 0LabelMensajes.Text =
"" End Select End SubAllen 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
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.
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
My Web Site and Blog
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
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?
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