How to expand a kendo grid on clicking a column value using angular js

Question

I am trying to use Kendo UI Grid with angular js. I need to expand the grid to further level when user clicks a link given in one of the columns of the grid. I used following code to expand the grid on click of an tag inside a kendo grid column.

$scope.mainGridOptions = {
               dataSource: {
            data: $scope.data,
            schema: {
                model: {
                    fields: {
                        fieldA: { type: "string" },
                        fieldB: { type: "string" },
                        fieldC: { type: "string" },
                        fieldT: { type: "numeric" }
                    }
                }
            },
            pageSize: 10
        },
        filterable: true,
        sortable: true,
        resizable: true,
        pageable: true,
        scrollable: true,
        columns: [
            { field: "fieldA", title: "FieldA", width: 90},
            { field: "fieldB", title: "FieldB", width: 90},
            { field: "fieldC", title: "FieldC", width: 90},
            { field: "fieldT", title: "FieldT", width: 90,  template:  "<a onclick='expand(this)'href='\\#'>#=mydata#</a>"}
        ]
            };

But on running the code it just gives me an error in the browser console window.

Uncaught ReferenceError: expand is not defined at HTMLAnchorElement.onclick

I researched and found that Kendo doesn't supports onclick event inside an tag. Therfore tried to use tag instead of tag. But it still does not work.

{ field: "fieldT", title: "FieldT", width: 90,  template:  "<span ng-click='showFileLevel(this)>{{mydata}}</span>"}

Can anyone please guide me in the right direction or let me know how can I expand a Kendo grid to further levels on clicking text inside a certain column of the grid using Angular JS.

Answer 1

你在你的js中用控制器编写expand（this）方法。