Kendo UI grid with Angular - Hide header row

[Donna Stewart]

How do I hide the complete header row for a grid?  I don't want any header/title to show for any column in the grid.  Preferably, I want the whole header row to be gone.  Is this possible and if so, how?

 Thanks for your help!

Donna

 

[Konstantin Dikov]

Hello Donna,

The easiest way for hiding the header of the grid will be with the following CSS:

<style>
    .k-grid-header{
      display: none;
    }
</style>

If you need to achieve this for particular Grid instance only, you could add custom CSS class to that widget and use it within the CSS selector above.

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Tigga]

This worked. I have 3 partial views in one page, and though I put the style in only one of the partial views, it eliminated the header row in all the grids. How can I be more choosy?

[Dimo]

Hi Tigga,

CSS rules can be targeted to specific HTML elements via suitable selectors. In your case, the easiest option is to use the ID of the Grid, or apply a custom CSS class to the Grid element (<div>). The resulting CSS rule should look like this:

 

#grid-id .k-grid-header {
  display: none;
}

/* or */

.grid-class .k-grid-header {
  display: none;
}

 

Regards,
Dimo
Progress Telerik