Hide expand/collapse column and use row click to expand/collapse row detail instead

4 posts, 0 answers
  1. Byang
    Byang avatar
    9 posts
    Member since:
    Nov 2015

    Posted 26 Feb 2016 Link to this post


    I was trying to hide the expand/collapse column and use the row click to expand/collapse the row detail instead. I was able to implement each individually but when I combine them the row click is no longer working.

    I use the following to hide the expand/collapse column in the DataBound event:


    And something like the following to implement the row click to expand the row detail:


    Did I miss anything?





  2. Patrick
    Patrick avatar
    251 posts

    Posted 26 Feb 2016 Link to this post

    Hi Ruby Jean,

    Please take a look at this example illustrating one way to expand and collapse rows in a hierarchical Kendo Grid by row clicking.   

    First, hide the classes "k-hierarchy-cell" and "k-hierarchy-col" during the databound event.  Then, create some custom jQuery to handle the click event on the rows. 

    More details about this approach can be found on this post in our forums.

    Hope this helps!

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Andrea
    Andrea avatar
    74 posts
    Member since:
    Jan 2005

    Posted 01 Jul 2018 Link to this post

    Seems that this doesn't work well with grouping enabled, there are cells width problems:


    Is there a way to solve this behavior?


    Thank you


  4. Preslav
    Preslav avatar
    591 posts

    Posted 03 Jul 2018 Link to this post

    Hello Andrea,

    If anyone from the community encounters the same, I am pasting my answer from your support ticket on the same topic:

    Generally speaking, hiding an element is similar to removing it from the DOM tree. Thus, hiding a cell in an HTML table sometimes leads to undesired side effects.

    What I would suggest is changing the width of the relevant column to 1 pixel. For example:

    dataBound: function() {
      grid.find(".k-hierarchy-col").css("width", "1px"); //get rid of detail icon
      grid.find(".k-hierarchy-cell").css("visibility", "hidden");

    Please, find the modified Dojo here:
    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.
Back to Top