Geetanjali Jain
Geetanjali Jain

Reputation: 402

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

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.

Upvotes: 3

Views: 433

Answers (1)

parita porwal
parita porwal

Reputation: 672

you write expand(this) method out of the controller in your js.

Upvotes: 1

Related Questions