How to hide a column's header in Kendo UI grid?

[Joonu]

Hi Team,

I'd like to know how the column headers in a grid may be hidden. The effect I wish to achieve is something like the following:

Instead of:

Order ID        Employee                Ship Address
10251            Janet Leverling        2, rue du Commerce
10252            Margaret Peacock    Boulevard Tirou, 255

I wish to make my grid look like:

10251             Janet Leverling         2, rue du Commerce
10252             Margaret Peacock     Boulevard Tirou, 255

Just the same thing, but without the headers. Please let me know how to achieve this.

[Iliana Dyankova]

Hello Joonu,

Hiding the headers in Kendo UI Grid for ASP.NET MVC is not supported out of the box, however it could be easily achieved: 

• Using CSS: 

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

• Through JavaScript: 

  $(".k-grid .k-grid-header").hide();

Regards,
Iliana Nikolova
the Telerik team

[David Edwards]

Is there a way to do this only on the detailInit/Child grids?

[Iliana Dyankova]

Hello David,

Yes, hiding the headers can be achieved only for the detailGrid-s in Kendo UI Grid for ASP.NET MVC. For this purpose you can use the same approaches: 

• CSS: 

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

• JavaScript: 

  @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    //....
    .Events(events => events.DetailInit("hideDetailGridHeaders"))
  )
  
  <script>
    function hideDetailGridHeaders() {
        $(".k-grid tbody .k-grid .k-grid-header").hide();
    }
  </script>

Regards,

Iliana Nikolova
the Telerik team

[shankar parshimoni]

Hi Nikolova it's working fine.thanks

Regards,
parsanamoni

[Feroz]

Hi Iliana,
If I have grouped by multiple columns, Can I hide the header for the first column and display only the second header? Right now, after grouping by two columns, we have two headers. I can get the details of the first groupby and display in the headertemplate of the second grouping.. So, want to do away with the header created by the first grouping.
As shown in the screenshot, I want to retain the header encircled in GREEN and do away with the one in red. I would still want the grouping but just don't want the header.

[Iliana Dyankova]

Hi Feroz,

Generally speaking you could achieve this using the suggested approach in my previous replies, however you should use custom logic to find the correct grouping rows. As a possible approach I can suggest the following:

• Find the first group field (using dataSource' group() method):       

  //get reference to the Grid's widget
  var grid = $("#grid").data("kendoGrid");
  //get the first group field
  var firstGroup = grid.dataSource.group()[0].field;

• Get the first group field's title from the grid.options.columns array;
• Check if the grouping row contains the particular title and if yes remove this row. As an example: 

  $('#grid tbody .k-grouping-row:contains("City")').hide();  //City is the first group column's title

Regards,

Iliana Nikolova
Telerik

[Shahid]

Hi Iliana, i had the same issue so i used 

$(".k-grid .k-grid-header").hide(); 
that works like magic but only problem i have is i have two grids say grid1 and grid2 and above code hides the column headers for both.
how can i achieve this only on one grid.

Thanks,
Shahid

[Iliana Dyankova]

Hi Shahid,

In order to hide the headers only for a single Grid you could use its id:

$('#firstGridID .k-grid-header').hide();

Regards,
Iliana Nikolova
Telerik

[Shahid]

worked great thanks

[Nasir]

Hi Iliana Nikolova

First of all thanks for the help though :)  .. Using your code I am able to hide the detail grid headers name from the grid. but when I tried to export them to excel it still appears there. Is there any way to hide the detail grid column name from the excel sheet as well ?

Thanks

[Stefan]

Hello Nasir,

The column headers cannot be removed using the same approach as the export depends on the fields and the data in the dataSource.

The output can be modified on the excelExport event:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-excelExport

I made an example demonstrating how the header can be accessed and modified:

http://dojo.telerik.com/azeBE

Regards,
Stefan
Telerik by Progress

[Nasir]

Thank's for your response.
Got it

[Khurram Ilyas]

 

I have multiple columns for kendo grid. Can't I use the headerAttributes on each column to give style: 'display: none;', instead of overwriting css class? Which one is the better way and why?

[quote]Iliana Nikolova said:Hello Joonu,

Hiding the headers in Kendo UI Grid for ASP.NET MVC is not supported out of the box, however it could be easily achieved: 

• Using CSS: 

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

• Through JavaScript: 

  $(".k-grid .k-grid-header").hide();

Regards,
Iliana Nikolova
the Telerik team

 

 

[/quote][quote]Iliana Nikolova said:Hello Joonu,

Hiding the headers in Kendo UI Grid for ASP.NET MVC is not supported out of the box, however it could be easily achieved: 

• Using CSS: 

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

• Through JavaScript: 

  $(".k-grid .k-grid-header").hide();

Regards,
Iliana Nikolova
the Telerik team

 

 

[/quote]

[Stefan]

Hello, Khurram,

In general, using the CSS or the JavaScript approach is the same in terms of end result.

The jQuery hide mothed is actually internally setting the style of the element to display none the same as the CSS rule.

In this case, it depends on the developer preferences which approach is more clear and readable.

Regards,
Stefan
Progress Telerik