Hide Grid Header

[aconran]

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

[dj]

quick and dirty css

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


that will of course hide all headers of all grids on that page.

[jon.whitcraft]

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

[aconran]

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?

[jon.whitcraft]

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.

[yevgen]

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

[rojar]

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.

[Animal]

Class names were different waaaaay back then!

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

[evankstone]

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

[mxracer]

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



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/

[torvad]

[Solved - please ignore my post]

Hi,
how do you implement this with 1.1 of the Ext, when the function getGridEl() is not around anymore?

I've tried to get the element and then add the style to it.

var el = Ext.DomQuery.selectNode("div[@id='myGridId'] div[@class='x-grid-header']");
el.style.display="none";

My div structure looks like this:
<div id='myGridId'>
<div...>
<div...>
<div class='x-grid-header'>

[rost]

I have a grid which is heavily reused in many views of the app, with and without the header. I needed it to be configurable from the outside, so in my MyGridPanel class I've set a variable:


showGridHeader: false // do not display grid header by defaultThe following code adds CSS class to hide the grid in initComponent method:


if (!this.showGridHeader) {
this.addClass('grid-no-header');
}In CSS, I have following:


.grid-no-header .x-grid3-header
{
display: none;
}So now all grids will have no headers by default but I can easily make a particular grid instance to have the header by setting it's public showGridHeader property to true. I hope this will help someone ;)

[abhranilnaha]

When I am trying to execute the above code, it is hiding the header but in IE it is showing scrollbars in the grid. I think it is not able to set the width of the grid properly. How can I fix this problem?
If I set hideHeaders to true in grid config then this scrollbar problem is gone and also it hides the header in IE but my grid is not able to load data in firefox. The grid store has data but still my grid in empty in firefox. My grid is inside a tabpanel in Ext 3.0. Does anybody know why hideheaders is causing problem in firefox for tabpanel?