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
![]() |
0 |
![]() |
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.
![]() |
0 |
![]() |
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
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.
![]() |
0 |
![]() |
I'll try this code and see what happens.
Thank you very much for your advices!!
Max
![]() |
0 |
![]() |
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 SubSub 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 ThenFor 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" NextSession("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 1For 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" NextSession("Locked") = 0LabelMensajes.Text =
"" End Select End Sub
![]() |
0 |
![]() |
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.
![]() |
0 |
![]() |
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
![]() |
0 |
![]() |
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
![]() |
0 |
![]() |
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?
![]() |
0 |
![]() |