How to hide the grid header kendo ui?

Question

I'm working with hierarchy grid kendo ui. I want to hide grid header. Currently, I use the code as below, however, only hide text of header.

// kendo ui grid
.TableHtmlAttributes(new { @class = "GridNoHeader" })

// css
.GridNoHeader thead.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;
}

Please share your experience if you can. Thanks

score 20 · Answer 1 · answered Jun 11 '14 at 20:53

Here is a jQuery way which you can run immediately after the grid has been initialized:

$("#grid .k-grid-header").css('display', 'none');

It hides the whole header, and is slightly better than the css solution because it applies the style directly to the header as an inline style, meaning that the style automatically has higher priority over all other kendo styles.

Regarding your current way, it only hides the text because visibility:hidden will hide the element, but space is still allocated for it. Try with display:none. Furthermore, the k-grid-header class is applied to the div element that contains the whole header, not on thead. Maybe try this:

.GridNoHeader div.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    display: none;
    overflow: hidden;
}

inside a grid function (`DataBound` for example) you can also use `$(this.thead).css('display', 'none');` — Vanderlei Morais, Jun 26 '19 at 18:05

score 5 · Accepted Answer · answered Jun 12 '14 at 02:28

5

To hide grid header, please use the code as below:

.GridNoHeader .k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    display: none;
    overflow: hidden;
}

answered Jun 12 '14 at 02:28

PeaceInMind

1,147
3
11
32

score 2 · Answer 3 · answered Feb 03 '16 at 19:05

For my case, there is 1 style attribute missing from the solution "display: none;"

This example leaves an empty header row with no header column names:

.GridNoHeader thead.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;
    display: none;
}

This Removes the header row entirely:

.GridNoHeader thead.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;
    display: none;
}

How to hide the grid header kendo ui?

3 Answers3