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

10 posts, 1 answers
  1. Joonu
    Joonu avatar
    6 posts
    Member since:
    Sep 2012

    Posted 08 Nov 2012 Link to this post

    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.

  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    1740 posts
    Member since:
    Sep 2012

    Posted 08 Nov 2012 Link to this post

    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!

  3. David Edwards
    David Edwards avatar
    6 posts
    Member since:
    Aug 2009

    Posted 12 Nov 2012 Link to this post

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

  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    1740 posts
    Member since:
    Sep 2012

    Posted 15 Nov 2012 Link to this post

    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!

  5. shankar parshimoni
    shankar parshimoni avatar
    18 posts
    Member since:
    Sep 2012

    Posted 06 Dec 2012 Link to this post

    Hi Nikolova it's working fine.thanks

    Regards,
    parsanamoni

  6. Feroz
    Feroz avatar
    6 posts
    Member since:
    Jun 2013

    Posted 17 Jun 2013 Link to this post

    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.

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    1740 posts
    Member since:
    Sep 2012

    Posted 20 Jun 2013 Link to this post

    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!

  8. Shahid
    Shahid avatar
    4 posts
    Member since:
    Oct 2013

    Posted 25 Feb in reply to Iliana Nikolova Link to this post

    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

  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    1740 posts
    Member since:
    Sep 2012

    Posted 25 Feb Link to this post

    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!

  10. Shahid
    Shahid avatar
    4 posts
    Member since:
    Oct 2013

    Posted 25 Feb in reply to Iliana Nikolova Link to this post

    worked great thanks

Back to Top