Grid Detail Template expanding on row click

4 posts, 0 answers
  1. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 16 Jan 2012 Link to this post

    At the moment, a detail tempate expands when clicking the little arrow to the left of the row.

    I've look at the events/config/methods available for a grid and had a tinker but cannot work out how I would expand the detail template when clicking on a row and not necessarily the arrow. Calling the method that contains the logic for the 'detailInit' works, but you can't attach the events required like 'detailRow' for example.

    Any ideas?
  2. Scott Marx
    Scott Marx avatar
    38 posts
    Member since:
    Apr 2010

    Posted 23 Jul 2013 Link to this post

    Did you ever find a way to do this?
  3. Josh
    Josh avatar
    72 posts
    Member since:
    Jun 2013

    Posted 07 Aug 2013 Link to this post

    For anyone still trying to do this, here's what works for me:

    First I wanted to hide the little expand row icon:
    dataBound: function() {
        // override the default detail row behavior of the grid since no official way provided
        $myGrid.find(".k-hierarchy-cell, .k-hierarchy-col").hide(); //get rid of detail icon
    }
    Note - you need to keep the actual icon element/column (versus .remove()) because things don't really work when it's missing.

    Next I handle row clicks to show detail rows manually:
    01.// handle grid row clicks for detail row expansion
    02.$myGrid.on("click", "tr", function(e) {
    03.    var $target = $(e.target);
    04.    // if you have links or other things in your rows that you don't want to
    05.    // trigger the detail row expansion, use an if statement to ignore them.
    06.    if (!$target.hasClass("sample-link"))
    07.    {
    08.        var $this = $(this);
    09.        var $link = $this.find("td.k-hierarchy-cell .k-icon");
    10.        $link.click();  // just fire the click event of the kendo detail row icon
    11.        $this.next().find(".k-hierarchy-cell").hide();  //fix detail row spacing due to missing icon
    12.    }
    13.});
    works for me. :-)
    However, it would be really nice to have the ability to do this more easily in an officially supported way.



  4. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 29 Sep 2013 Link to this post

    Thanks for this Josh!  Works like a charm.
Back to Top