locked
GridView : Freezing First Columns and Freezing Column's Headers RRS feed

Answers

  • User-512755392 posted

    Hi Max,

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

    1   Add locked Css:

     td.locked, th.locked {
    ;   
    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 12, 2007 12:05 AM
  • User-2106054853 posted

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 12, 2007 3:23 AM

All replies

  • User-512755392 posted

    Hi Max,

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

    1   Add locked Css:

     td.locked, th.locked {
    ;   
    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 12, 2007 12:05 AM
  • User-2106054853 posted

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 12, 2007 3:23 AM
  • User30282612 posted

    I'll try this code and see what happens.

    Thank you very much for your advices!!

    Max

    Friday, June 15, 2007 12:28 PM
  • User30282612 posted

    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; ; 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; ; 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; ; top: 43px" Width="110px" TabIndex="2"></asp:TextBox>

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

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

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

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

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

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

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

    &nbsp; &nbsp; &nbsp;

    &nbsp; &nbsp;

    &nbsp; &nbsp;

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

    left: 374px; ; 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; ; 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; ; 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; ; top: 44px" Text=">>" Width="35px" TabIndex="7" Font-Bold="True" ForeColor="#000033" />

    &nbsp;&nbsp;

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

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

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

    <br />

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

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

    &nbsp;&nbsp;&nbsp;<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; ;

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

    &nbsp;&nbsp;<br />

    <br />

    <br />

    <br />

    <br />

    <div id="div-datagrid" style="z-index: 115; left: 22px; width: 478px; ; top: 72px; height: 380px; " class="panel">

    <asp:GridView ID="GridContactos" runat="server" AutoGenerateColumns=False style="z-index: 100; left: 2px; ; 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>

    &nbsp; &nbsp;

    </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; ; 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>

    &nbsp;<br />

    </div>

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

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

    <br />

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

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

    <br />

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

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

    <br />

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

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

    <br />

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

    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"

    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

    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"

    Next

    Session("Locked") = 0

    LabelMensajes.Text = ""

    End Select

    End Sub

     

    Friday, June 15, 2007 1:20 PM
  • User-2106054853 posted

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

    Monday, June 18, 2007 3:30 AM
  • User-264353060 posted

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

    http://www.vishwamohan.net/post/2007/08/04/Freeze-Column-in-GridView.aspx

     

     

    Saturday, August 4, 2007 12:49 AM
  • User-835591605 posted

    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

    Monday, October 20, 2008 7:12 PM
  • User605104316 posted

    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?

    Tuesday, April 14, 2009 6:47 AM
  • User1027758673 posted

    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

    Tuesday, September 22, 2009 2:49 PM
  • User276104310 posted

    Hi,

    You might find this link interesting:

    http://weblogs.asp.net/dwahlin/archive/2007/07/31/freeze-asp-net-gridview-headers-by-creating-client-side-extenders.aspx

    It describes how to pin gridview headers by using client scripts.

    Tuesday, September 22, 2009 5:38 PM
  • User9756816 posted

    I tried using the above code by mjohn and Allen Chen – MSFT's input with IE 8 & ASP.NET 2.0. It does not work. Are there any other suggestions? Note: I know IE 8 does not allow expressions.  

     

    I also followed the link given above to

    http://weblogs.asp.net/dwahlin/archive/2007/07/31/freeze-asp-net-gridview-headers-by-creating-client-side-extenders.aspx

    This works in IE 6 and 7, but it does not work in IE8 either.

    Thursday, March 25, 2010 1:11 PM
  • User1558585021 posted

    I was just looking into do the same, I would prefer no client side or css so any suggestions?

    Thursday, March 25, 2010 5:36 PM
  • User-1387159755 posted

    I was looking to lock columns 1 & 2 and header columns 1 & 2.  Nothing here worked correctly despite numerous visits to several creative types claiming that they personally had solved it on their own by... remarkebly... using the exact code syntax, widths, comments, etc... amazing.   I took those... ahem.. non-working solutions (header part didn't work) and clunked around a while to strip this to the minimum needed. 

    This particular example uses a dynamic grid (a grid defined by the table pulled from a DB call, not staticly defined in the asp or server code) that binds the first two columns and their headers from sliding with the horizontal scrollbar.  There is server code in my solution although you could probably do the same in javascript at load time. 

    The minimum asp code required to hit the server code is:

    <asp:GridView ID="MyGrid" runat="server" OnRowDataBound="MyGrid_RowDataBound"  <!-- the rest of your grid definition follows it is irrelevant to this discussion -->

    Your code behind should include a definition for MyGrid_RowDataBound.  This code should tell your server to use your CssClass "locked" for those cells as it builds the html (get to that part in a minute).  My code was (tersely shown):

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

    Now the trick that was needed was a style.  Mind you I'm pretty new to this stuff, coming from (arg) C++ on old legacy systems so I may not describe everything perfectly but should be in the ballpark.  What a style is going to let us do is pre-define how we want to handle particular html tags (what attributes to apply).  At run-time, our table doesn't really exist and the styles we want to apply would go into the tags of the dynamically created table.  [It may be possible to do this in server code too].  The method I used was copied from others.  During the databinding, each row hits the function we defined above and assigns the style "locked" to those cells... one row at a time.  Note that the first loop through is a header row, the succeeding rows are data rows.

    During rendering (perhaps the wrong event) the server will look to see if the style "locked" appears for td and th.  If it finds the CssClass for the element th and td it will apply those attributes.

    You can add styles on a page directly to your page w/o a stylesheet.  I don't do it this way (and didn't) but in the interest of "greatest simplicity" someone asked for that so...

    Between your <head></head> tags on the page with the grid, add:

    <style type="text/css" ><!--  td.locked, th.locked { ; cursor: default; }  --></style>

    Now one last thing, not sure why but we need to wrap the grid inside a div tag (never got it to work w/o one).  Since that div is available at render time it doesn't need a stylesheet class to define it (like td.locked for example).  Wrap your grid in div tags like this.

    <div style="overflow: auto;">

        <asp:GridView ...your new gridview code goes here (see above)...>

        </asp:GridView>

    </div>

    ..and that should get it.  Good luck!

    "I may be old, but at least I'm ugly." --Yoda

     

     

    Tuesday, May 18, 2010 4:27 PM
  • User-1528640642 posted

    Hi Wooper,

    for me also its very slow. did u find anu other solution??? 

    Monday, September 20, 2010 1:36 AM
  • User2106330258 posted

    Hi Wooper and senthilkumar.moorthy, if you guys find a solution, which is cross browser compatible, please let me know. I also need a speed solution.


    Thanks

    Friday, November 12, 2010 7:03 AM
  • User2028823583 posted

    Wow, 4+ years later I stumbled upon this post.  Worked exactly as I needed it to in my gridview!  :-)

    Thursday, October 6, 2011 2:22 PM
  • User365896223 posted

    Not Working man, i was trying your solution.

    Does this solution ever worked for anyone?

    Tuesday, February 19, 2013 1:52 AM