CODEWITHSUNDEEP
jquerycsskendo-uikendo-grid
PeaceInMind
PeaceInMind

Reputation: 1167

How to hide the grid header kendo ui?

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

Upvotes: 15

Views: 23668

Answers (3)

Aaron Reed
Aaron Reed

Reputation: 984

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;
}

Upvotes: 2

PeaceInMind
PeaceInMind

Reputation: 1167

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

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

Upvotes: 5

gitsitgo
gitsitgo

Reputation: 6769

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;
}

Upvotes: 20

Related Questions