Grid Detail Template expanding on row click

[Gabriel]

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?

[Scott Marx]

Did you ever find a way to do this?

[Josh]

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.

[Rene]

Thanks for this Josh!  Works like a charm.