Expand/Collapse Detail with Custom Button

[Michael]

my requirement is to have a custom button on each data row.

When a user clicks the button the detail row expands for that specific row only.

I am able to expand and collapse using the button, but its doing it for the entire grid. 

What do i need to do to keep it to the current(selected) row.

command.Custom("View Classes").Click("showClasses");

function showClasses(e)

{

    var grid = $("#Grid").data("kendoGrid");

      if ("tr.k-state-selected")

           {
               var $link = grid.tbody.find("td.k-hierarchy-cell .k-icon");
                $link.click();
            }

}

[Eyup]

Hi Michael,

Your current selector gets all of the expand/collapse icons and simulates click to all of them. Instead, you will need to call this only for the corresponding row element:

function showClasses(args) {
    var row = $(args.target).parents("tr").first();
    var icon = row.find(".k-hierarchy-cell>a.k-icon");
    icon.click();
}

If you will remove the built-in button column, you can also achieve this requirement using the expandRow and collapseRow methods accordingly:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-expandRow

I hope this will prove helpful.

Regards,
Eyup
Telerik by Progress