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

Answer 1

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

Answer 2

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

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