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

1 Answer 2858 Views
Grid
Joonu
Top achievements
Rank 1
Joonu asked on 08 Nov 2012, 07:45 AM
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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 08 Nov 2012, 08:52 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
David Edwards
Top achievements
Rank 1
commented on 12 Nov 2012, 06:20 PM

Is there a way to do this only on the detailInit/Child grids?
Iliana Nikolova
Telerik team
commented on 15 Nov 2012, 08:22 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
shankar parshimoni
Top achievements
Rank 1
commented on 06 Dec 2012, 08:32 AM

Hi Nikolova it's working fine.thanks

Regards,
parsanamoni
Feroz
Top achievements
Rank 1
commented on 17 Jun 2013, 09:03 PM

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 Nikolova
Telerik team
commented on 20 Jun 2013, 03:08 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Shahid
Top achievements
Rank 1
commented on 25 Feb 2014, 10:48 AM

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 Nikolova
Telerik team
commented on 25 Feb 2014, 01:12 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Shahid
Top achievements
Rank 1
commented on 25 Feb 2014, 02:22 PM

worked great thanks
Nasir
Top achievements
Rank 1
commented on 20 Mar 2017, 11:11 AM

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
Telerik team
commented on 23 Mar 2017, 11:08 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Nasir
Top achievements
Rank 1
commented on 24 Mar 2017, 04:43 AM

Thank's for your response.
Got it
Khurram Ilyas
Top achievements
Rank 1
commented on 20 May 2018, 06:57 PM

 

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
[/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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
[/quote]
Stefan
Telerik team
commented on 21 May 2018, 06:35 AM

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Joonu
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or