1. #1
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default Hide Grid Header

    Hide Grid Header


    How do I hide all grid headers? I want the column to show up but not the header.

  2. #2
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    quick and dirty css
    Code:
    <style type="text/css">
    .x-grid-header {
        display:none;
    }
    </style>
    that will of course hide all headers of all grids on that page.

  3. #3
    Developer... jon.whitcraft's Avatar
    Join Date
    Mar 2007
    Posts
    391
    Vote Rating
    0
    jon.whitcraft is on a distinguished road

      0  

    Default


    Code:
    <style type="text/css">
    #gridid .x-grid-header {
        display:none;
    }
    </style>
    change #gridid to the id of your grid and it will only hide the header for the grid that you dont want it to show for.
    Jon
    Lead Internal Application Engineer - SugarCRM
    h2ik.co

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Thanks guys. I figured I was missing config option in one of the many objects needed to create a grid.

    On that note, perhaps this would be a useful config option?

  5. #5
    Developer... jon.whitcraft's Avatar
    Join Date
    Mar 2007
    Posts
    391
    Vote Rating
    0
    jon.whitcraft is on a distinguished road

      0  

    Default


    The Problem is that it needs to be done in css.

    I think it just needs to be outlined better in the documentation. I'll make sure and make a not of it for the documentation team to make sure and include.
    Jon
    Lead Internal Application Engineer - SugarCRM
    h2ik.co

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    4
    Vote Rating
    0
    yevgen is on a distinguished road

      0  

    Default


    Quote Originally Posted by jon.whitcraft View Post
    Code:
    <style type="text/css">
    #gridid .x-grid-header {
        display:none;
    }
    </style>
    change #gridid to the id of your grid and it will only hide the header for the grid that you dont want it to show for.
    Thanks. It works for me.

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    102
    Vote Rating
    0
    rojar is on a distinguished road

      0  

    Default


    Hi,

    I just cannot figure out why this is not working for me.

    I am using yui-ext-33

    Using grid

    var configureColGrid = new YAHOO.ext.grid.Grid('srarch', srarchDataModel, srarchlColumnModel);

    Used style sheet
    <style type="text/css">
    #gridid .x-grid-header {
    display:none;
    }
    </style>

    But my grid headers are still visible

    Please guide me.


    Thanks.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Class names were different waaaaay back then!

    Use Firebug to find uot which class you have to hide.

  9. #9
    Ext User evankstone's Avatar
    Join Date
    Mar 2007
    Posts
    69
    Vote Rating
    0
    evankstone is on a distinguished road

      0  

    Default


    ...so is there a way to hide the column headers through javascript - i.e. not with CSS?

  10. #10
    Sencha User mxracer's Avatar
    Join Date
    Apr 2007
    Location
    Napoleon, OH
    Posts
    299
    Vote Rating
    0
    mxracer is on a distinguished road

      0  

    Default


    I'm using this code to hide the grid header:

    Code:
    var gridHead = grid.getGridEl().child('div[class=x-grid3-header]');
    gridHead.setStyle('display', 'none');
    This is assuming the class of the header is "x-grid3-header". Use Firebug to inspect and verify.

    If you want to see it in action goto: http://qwikioffice.com/ExtJS-Demos/FormGrid/

Similar Threads

  1. how to hide the header of grid ?
    By waynez in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 2 Apr 2007, 8:19 AM
  2. add a tooltip to a grid header
    By jeandamien in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 30 Mar 2007, 4:07 AM
  3. Grid header hide
    By seno in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 12 Mar 2007, 11:02 PM
  4. Grid Header Tooltips
    By tryanDLS in forum Community Discussion
    Replies: 7
    Last Post: 28 Nov 2006, 5:11 AM
  5. Need this.shim.hide() in hide func of BasicDialog
    By kalebwalton in forum Community Discussion
    Replies: 1
    Last Post: 25 Nov 2006, 4:29 PM

Thread Participants: 13