Kendo UI detail grid expansion on row click

Question

I am using Kendo UI Grid master detail template like in this docs http://demos.telerik.com/kendo-ui/grid/angular , I am able to get the template by clicking in the hierarchy cell, I want to know if there is some easy way to expand the detail template by clicking anywhere on row.

Thanks!

Answer 1

To do that you can follow these steps:

1. Add k-on-change="handleChange(kendoEvent)" to trigger the function when we select any row,
2. dont forget to add k-rebind="gridOptions.selectable",
3. and i also prefer <div kendo-grid="grid"></div> so later on we can select the grid instance
4. create $scope.handleChange = function(kendoEvent){....}to handle the event
5. and finally here is a kendo dojo example from yours that i've modified

EDIT:

1. As per your comment, you simply close all expanded row first then you can open the one which is selected. Add this $scope.grid.collapseRow($scope.grid.tbody.find("tr.k-master-row")); before $scope.grid.expandRow($scope.grid.tbody.find("tr.k-master-row.k-state-selected"));. Updated dojo