A button on each row of Kendo ui Grid that expands detail view

Question

I am using angular and Kendo ui Grid. I have a custom button on each row which i need it bound to a function that expand the detail view. Below is the grid options. Please help

   $scope.mainGridOptions = {
        dataSource: financialYearsDataSource(),
        sortable: true,
        selectable: true,
        columnMenu: true,
        columns: [

            { field: "FinYearName", title: "Year Name", width: "150px" },
            {field: "StartDate", title: "*Start Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
            {field: "EndDate", title: "*End Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
            {field: "Remarks", title: "*Remarks", editor: descriptionEditor, hidden:true},
            {
                command: [
                    {name: "edit"},
                    {name: "destroy"},
                    {
                        text: " Expand/Collapse",
                        click: $scope.expandToggle,
                        className: "fa fa-map-marker"
                    },
                ], title: " ", width: "300px"
            }],

        editable: {
            mode: "popup"
        },
        pageable: {
            pageable: true,
            refresh: true
        },
        detailExpand: function (e) {
            this.collapseRow(this.tbody.find(' > tr.k-master-row').not(e.masterRow));
        }

    };

Here is the toggle function that needs to do the toggling

$scope.expandToggle = function (e) {
        e.preventDefault();
        $scope.myGrid.expandRow($(this));
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));}

Here is a jsfiddle demo:http://jsfiddle.net/akimaina/ay3vv2cm/2/

Answer 1

I have updated your fiddle. Please check if this solves.

http://jsfiddle.net/ay3vv2cm/3/

$("#grid").on("click",".clsExpand", function(e){
   $("#grid").data("kendoGrid").expandRow($(e.currentTarget).closest("tr"));    
});