Freezing Grdiview Header and first column of each row

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • NareshN
    New Member
    • Aug 2010
    • 45

    Freezing Grdiview Header and first column of each row

    Can u please tell me how to freeze gridview header other than CSS option.I tried this option but its changing the entire look of the page.Font CSS is not workly properly.

    Can u tell me other option.
    Last edited by Niheel; Apr 8 '11, 10:57 AM.
  • VijaySofist
    New Member
    • Jun 2007
    • 107

    #2
    Hi,

    Please Try the following Code

    1 Add locked Css:

    Code:
    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:

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

    Comment

    • NareshN
      New Member
      • Aug 2010
      • 45

      #3
      Hi Vijay,

      CSS is working but it is changing the entire look of page,font style and size.Can u tell me alternative option for gridfreeze.

      Comment

      • aspdotnetuser
        New Member
        • Nov 2010
        • 22

        #4
        Hi,

        The CSS trick for gridview fixed headers may not help in all browsers consitently.

        Try to use javascript or jquery to manipulate with client widht & height after rendering the HTML. Bit of extra working but certain in all browsers.

        aspdotnetuser.

        Comment

        • Frinavale
          Recognized Expert Expert
          • Oct 2006
          • 9749

          #5
          If you really don't want to use JavaScript, and the CSS solution isn't working up to your standards, consider putting putting the Column Headers in a GridView or Table of their own. Put this above the GridView that contains the data...and wrap both elements within a Panel or HTML <div> element to keep them together. Make sure that both controls are the same width.

          -Frinny

          Comment

          Working...