Gridview Fixed Header Issue

Last post 07-21-2009 12:10 PM by mudassarkhan. 8 replies.

Sort Posts:

  • Gridview Fixed Header Issue

    09-20-2006, 12:25 PM
    Locked
    • Member
      147 point Member
    • TheCheeta
    • Member since 10-07-2005, 8:56 PM
    • St. Louis, MO
    • Posts 40

    This post fits in about 3 categories, so hopefully this forum will fit.

    I have implemented one of the variety of ways that people are trying to get headers in gridviews to stay put. I've gone crazy-go-nuts with it now, and have come across a few issues, namely, flickering (the pieces that are supposed to stay put flicker like crazy during a scroll in any direction) and a page that seems to never end in a horizontal scroll (the H scrollbar is a normal size prior to and during scroll, until I hit the right edge of the scroll... then it just keeps going, and going, and going...). Here is what I have (most extraneous code has been stripped out, and no, the sorting functionality does not work yet). Thanks for any insight you may have to offer... or better yet, a better fixed header solution!

    PendingBook.Master

    1    <%@ Master Language="VB" CodeFile="PendingBook.master.vb" Inherits="MasterPages_PendingBook" %>
    2    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3    <html xmlns="http://www.w3.org/1999/xhtml">
    4    <head runat="server">
    5        <title>Pending Book</title>
    6    </head>
    7    <body style="margin: 0 0 0 0;">
    8        <form id="form1" runat="server">
    9            <div style="position: relative; width: 100%; top: expression(this.offsetParent.scrollTop);
    10               left: expression(this.offsetParent.scrollLeft); background-color: #00A8e8;">
    11               <div style="left: 0px;">
    12                   <asp:Image ID="imgTopLogo" ImageUrl="~/MasterPages/images/pb_toplogo.jpg" runat="server" />
    13               </div>
    14               <div style="position: absolute; top: 0px; right: 0px; padding: 15px; margin: 0 20px;
    15                   color: White; font: 1em/1.5 tahoma,verdana,sans-serif;">
    16                   A menu using asp:Hyperlink is right here.
    17               </div>
    18               <div style="top: 15px; width: 100%; background-color: #cccbc9; border: solid 1px #807F84;
    19                   padding-left: 1em; font: 1em/1.5 tahoma,verdana,sans-serif;">
    20                   <table width="100%">
    21                       <tr>
    22                           <td width="50%">
    23                               <asp:ContentPlaceHolder ID="Search" runat="server">
    24                               </asp:ContentPlaceHolder>
    25                           </td>
    26                           <td align="right" width="50%">
    27                               <asp:ContentPlaceHolder ID="GridPager" runat="server">
    28                               </asp:ContentPlaceHolder>
    29                           </td>
    30                       </tr>
    31                   </table>
    32               </div>
    33           </div>
    34           <div style="position: fixed; width: 100%; background-color: White; margin: 0 0 .5em 0">
    35               <asp:ContentPlaceHolder ID="Body" runat="server">
    36               </asp:ContentPlaceHolder>
    37           </div>
    38           <div id="footer" style="position: relative; width: 99%; left: 0px; height: 12px;
    39               background-color: White; border-top-color: #FF6600; border-style: double; border-top-width: medium;
    40               border-left-color: #FFFFFF; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF;
    41               font-family: Verdana;">
    42               <table width="100%">
    43                   <tr>
    44                       <td style="width: 50%">
    45                           Some footer stuff here...
    46                       <td style="background-color: #A60486">
    47                           ...and here.
    48                       </td>
    49                   </tr>
    50               </table>
    51           </div>
    52       </form>
    53   </body>
    54   </html>
    

    PendingBook.Master.vb

    There is currently no code file content. 

    Default.aspx

    1    <%@ Page Language="VB" MasterPageFile="~/MasterPages/PendingBook.master" AutoEventWireup="false"
    2        CodeFile="Default.aspx.vb" Inherits="pendingbook_Default" Title="Pending Book" %>
    3    <asp:Content ID="Body" ContentPlaceHolderID="Body" runat="Server">
    4        <p>
    5            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging"
    6                OnSorting="gvSort" AllowSorting="True" OnDataBound="GridView1_DataBound">
    7                <PagerSettings Visible="False" />
    8                <Columns>
    9                    All of my column definitions...
    10               </Columns>
    11           </asp:GridView>
    12       </p>
    13   </asp:Content>
    14   <asp:Content ID="Search" ContentPlaceHolderID="search" runat="server">
    15       Search
    16       <asp:DropDownList ID="ddlSearch" runat="server">
    17           <asp:ListItem>IBI</asp:ListItem>
    18           <asp:ListItem>Status</asp:ListItem>
    19           <asp:ListItem>Customer Name</asp:ListItem>
    20       </asp:DropDownList> for <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox> <asp:Button
    21           ID="btnSearch" Text="Go" runat="server" />
    22   </asp:Content>
    23   <asp:Content ID="Pager" ContentPlaceHolderID="gridPager" runat="server">
    24       <asp:ImageButton ID="btnFirst" runat="server" ImageUrl="~/images/icons/resultset_first.png"
    25           OnCommand="gvPaginate" CommandArgument="First" CommandName="Page" />
    26       <asp:ImageButton ID="btnPrevious" runat="server" ImageUrl="~/images/icons/resultset_previous.png"
    27           OnCommand="gvPaginate" CommandArgument="Prev" CommandName="Page" />
    28       Page
    29       <asp:DropDownList ID="ddlPages" runat="server" OnSelectedIndexChanged="ddlPages_SelectedIndexChanged"
    30           AutoPostBack="True">
    31       </asp:DropDownList>
    32       of
    33       <asp:Label ID="lblPageCount" runat="server"></asp:Label>
    34       <asp:ImageButton ID="btnNext" runat="server" ImageUrl="~/images/icons/resultset_next.png"
    35           OnCommand="gvPaginate" CommandArgument="Next" CommandName="Page" />
    36       <asp:ImageButton ID="btnLast" runat="server" ImageUrl="~/images/icons/resultset_last.png"
    37           OnCommand="gvPaginate" CommandArgument="Last" CommandName="Page" />
    38        Records per page 
    39       <asp:DropDownList ID="ddlRows" runat="server" AutoPostBack="true" EnableViewState="true"
    40           OnSelectedIndexChanged="ddlRows_SelectedIndexChanged" /> 
    41       <asp:Label ID="lblItemCount" runat="server"></asp:Label><asp:Label ID="lblSortExpression"
    42           runat="server"></asp:Label>
    43   </asp:Content>
    

    Default.aspx.vb

    1    Imports PendingBookBLL
    2    
    3    Partial Class pendingbook_Default
    4        Inherits System.Web.UI.Page
    5    
    6        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    7            If Not Page.IsPostBack Then
    8                ddlRows.Items.Insert(0, New ListItem("10", "10"))
    9                ddlRows.Items.Insert(1, New ListItem("20", "20"))
    10               ddlRows.Items.Insert(2, New ListItem("50", "50"))
    11               ddlRows.Items.Insert(3, New ListItem("100", "100"))
    12               ddlRows.Items.Insert(4, New ListItem("1000", "1000"))
    13               ddlRows.Items.Insert(5, New ListItem("5000", "5000"))
    14               ddlRows.SelectedIndex = ddlRows.Items.IndexOf(ddlRows.Items.FindByValue(GridView1.PageSize))
    15               ViewState("sortexpression") = "IBI"
    16               ViewState("sortdirection") = "asc"
    17               ViewState("SelectedPage") = 0
    18               PopulateGrid()
    19           End If
    20       End Sub
    21   
    22       Protected Sub PopulateGrid()
    23           Dim ordersPending As New PendingBookBLL
    24           GridView1.DataSource = ordersPending.GetPendingOrders
    25           GridView1.DataBind()
    26   
    27           Dim rows As Integer = ordersPending.GetPendingOrders.Count
    28           Dim rowsinpage As Integer
    29           If ddlRows.SelectedItem Is Nothing Then
    30               rowsinpage = 10
    31           Else
    32               rowsinpage = ddlRows.SelectedItem.Value
    33           End If
    34           Dim pages As Integer = (rows + rowsinpage - 1) / rowsinpage
    35           Dim startrecord As Integer = (GridView1.PageIndex * rowsinpage) + 1
    36           Dim endrecord As Integer = (GridView1.PageIndex * rowsinpage) + rowsinpage
    37           If endrecord > rows Then
    38               endrecord = rows
    39           End If
    40           Dim sortparameters As String = ViewState("sortexpression") & " " & ViewState("sortdirection")
    41           Me.lblItemCount.Text = "Records " & startrecord & " through " & endrecord & " of " & rows
    42       End Sub
    43   
    44       Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
    45           GridView1.PageIndex = e.NewPageIndex
    46           PopulateGrid()
    47       End Sub
    48   
    49       Protected Sub GridView1_DataBound(ByVal sender As Object, ByVal e As EventArgs)
    50           Dim rows As Integer = GridView1.Rows.Count
    51           Dim rowsinpage As Integer
    52           If ddlRows.SelectedItem Is Nothing Then
    53               rowsinpage = 10
    54           Else
    55               rowsinpage = ddlRows.SelectedItem.Value
    56           End If
    57           Dim pages As Integer = (rows + rowsinpage - 1) / rowsinpage
    58           If Not (ddlPages Is Nothing) Then
    59               Dim i As Integer = 0
    60               ddlPages.Items.Clear()
    61               While i < pages
    62                   Dim intPageNumber As Integer = i + 1
    63                   Dim lstItem As ListItem = New ListItem(intPageNumber.ToString)
    64                   ddlPages.Items.Add(lstItem)
    65                   System.Math.Min(System.Threading.Interlocked.Increment(i), i - 1)
    66               End While
    67               ddlPages.SelectedIndex = ViewState("SelectedPage")
    68               GridView1.HeaderRow.Style.Add("top", "expression(this.offsetParent.scrollTop)")
    69               GridView1.HeaderRow.Style.Add("position", "relative")
    70           End If
    71           If Not (lblPageCount Is Nothing) Then
    72               lblPageCount.Text = ddlPages.Items.Count
    73           End If
    74       End Sub
    75   
    76       Protected Sub ddlRows_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
    77           GridView1.PageSize = ddlRows.SelectedValue
    78           PopulateGrid()
    79       End Sub
    80   
    81       Protected Sub ddlPages_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
    82           GridView1.PageIndex = ddlPages.SelectedIndex
    83           ViewState("SelectedPage") = ddlPages.SelectedIndex
    84           PopulateGrid()
    85       End Sub
    86   
    87       Protected Sub gvPaginate(ByVal sender As Object, ByVal e As CommandEventArgs)
    88           Dim intCurIndex As Integer = GridView1.PageIndex
    89           Select Case e.CommandArgument.ToString.ToLower
    90               Case "first"
    91                   GridView1.PageIndex = 0
    92               Case "prev"
    93                   GridView1.PageIndex = intCurIndex - 1
    94               Case "next"
    95                   GridView1.PageIndex = intCurIndex + 1
    96               Case "last"
    97                   GridView1.PageIndex = GridView1.PageCount
    98           End Select
    99           PopulateGrid()
    100      End Sub
    101  
    102      Protected Sub gvSort(ByVal sender As Object, ByVal e As GridViewSortEventArgs)
    103          ViewState("sortexpression") = e.SortExpression
    104          If (ViewState("sortdirection") Is DBNull.Value) Then
    105              ViewState("sortdirection") = "asc"
    106          Else
    107              If ViewState("sortdirection").ToString = "asc" Then
    108                  ViewState("sortdirection") = "desc"
    109              Else
    110                  ViewState("sortdirection") = "asc"
    111              End If
    112          End If
    113          PopulateGrid()
    114      End Sub
    115  End Class
    
      
    Filed under:
  • Re: Gridview Fixed Header Issue

    09-21-2006, 3:32 AM
    Answer
    Locked
    • Star
      9,373 point Star
    • rexlin
    • Member since 07-17-2006, 8:43 AM
    • Posts 1,751

    Hi, TheCheeta:

    I am not quite understand your complicated code above. If you just want to fix the header, may this code helps:

    Freeze Header:
    1. Define class .Freezing in Stylesheet:

    .Freezing
    {
       position:relative ;
       top:expression(this.offsetParent.scrollTop);
       z-index: 10;
    }
    2. Assign Datagrid Header's cssClass to Freezing
    <HeaderStyle ... CssClass= "Freezing" ...></HeaderStyle>

    3. You are done!

    Freeze Columns:
    1. Define class .FreezingCol in Stylesheet:

    .FreezingCol
    {
       LEFT: expression(document.getElementById("freezingDiv").scrollLeft);
       /*freezingDiv is the name of the div to make your datagrid scrollable */ 
       POSITION: relative;
       z-index: 1;
    }

    2. Assign Columns' cssClass to FreezingCol
    If you have templateColumn, you can simply assign cssClass of the column to freezingCol. If you create the columns dynamically, you can assign the cssClass at runtime within ItemCreated event. For example:

    e.Item.Cells(0).CssClass = "FreezingCol"
    e.Item.Cells(1).CssClass = "FreezingCol"

    3. You are done! Please keep in mind this solution only works with IE5 & up. To make cross browser solution,



    Best Regards,
    __________________________________________________
    Sincerely,
    Rex Lin
    Microsoft Online Community Support

    This posting is provided "AS IS" with on warranties, and confers no rights.
  • Re: Gridview Fixed Header Issue

    06-08-2007, 7:03 PM
    Locked
    • Member
      2 point Member
    • mjohnen
    • Member since 05-15-2007, 4:34 PM
    • Posts 8

    Hi Rexlin:

    I've tried what you suggested, but the column code is not working in my GridView. Please, tell me what properties are you setting in a GridView enviroment.

    Thanks a lot!

    Max

  • Re: Gridview Fixed Header Issue

    09-12-2007, 12:56 AM
    Locked
    • Member
      2 point Member
    • kudhay
    • Member since 09-12-2007, 4:51 AM
    • Posts 1

    hi rexlin,

    Your solution for Fixing the column in gridview is working fine in IE.

    But i need a cross browser solution for the same.

    Thanks in advance for your suggestion.

     

    Thanks,

    udhay

  • Re: Gridview Fixed Header Issue

    09-20-2007, 7:53 AM
    Locked
    • Member
      2 point Member
    • IT4EVA
    • Member since 09-20-2007, 11:43 AM
    • Posts 1

    Hi Rexlin,

    I'm trying to implement this and am having problems with your solution. The header row is freezed as one would expect. But my grid has more columns than can be fitted on the page grid and thus is wrapped in a div with overflow set to true. However your solution causes the frozen header to carry on pass the horizontal scrollable grid. Any ideas what I can do to overcome this problem?

    Thanks

    Kin

  • Re: Gridview Fixed Header Issue

    05-08-2008, 3:02 PM
    Locked
    • Member
      269 point Member
    • visliCom
    • Member since 05-01-2008, 4:57 PM
    • Posts 226

    This technique not working on firefox browser. 

    I have little problem with this ..after Freezing header its not left justified, how to make this left justified.

    Please help.

  • Re: Gridview Fixed Header Issue

    10-21-2008, 5:18 AM
    Locked
    • Participant
      784 point Participant
    • ashrafur
    • Member since 04-15-2008, 7:14 AM
    • Dhaka, Bangladesh
    • Posts 132

    .Freezing
    {
       position:relative ;
       top:expression(this.offsetParent.scrollTop);
       z-index: 10;
    }   
           
    2.Assign Datagrid Header's cssClass to Freezing
    <HeaderStyle ... CssClass= "Freezing" ...></HeaderStyle>



     

    This is working fine in Internet Explorer but not working in firefox. can anybody please help me to say why its not working in firefox

     




     




    Ashrafur Rahaman
    http://www.ashrafur.com
  • Re: Gridview Fixed Header Issue

    07-21-2009, 11:53 AM
    Locked
    • Member
      28 point Member
    • N.netdev
    • Member since 07-07-2009, 2:50 PM
    • Posts 71

    when i am writing

    .Freezing
    {
       position:relative ;
       top:BLOCKED EXPRESSION;
       z-index: 10;
    }

    i am getting error with top:expression statement....

    What should i change...

  • Re: Gridview Fixed Header Issue

    07-21-2009, 12:10 PM
    Locked
    • All-Star
      59,891 point All-Star
    • mudassarkhan
    • Member since 02-28-2008, 5:28 AM
    • Mumbai, India
    • Posts 10,550
    • TrustedFriends-MVPs
Page 1 of 1 (9 items)