How to use Angular directive inside Kendo Grid Column

Question

This is relatively simple, or so I would have thought.

I have a custom Angular directive - I can add it to the DOM with

<custom-directive ng-model="someAngularScopeObject"></custom-directive>

My question, is how can I use this into Kendo Grid column template.

My grid is defined using DOM angular attributes, and the kendo grid k-options are specified in the angular scope.

For column template, how can I bind the row's column dataItem to my custom directives ng-model?

Basically, in the grid's k-options:

columns: [
        { field: "name", title: "Name" },
        { field: "description", title: "Description" },
        { field: "managerName", title: "Manager",
            template: function (dataItem) {
                //what I care about is dataItem.prop1
                return ("<custom-directive ng-model='???????????'>
                         </custom-directive>");     
        }
    }]

The grid and the grid's data source are on the Angular's controller's scope

What are you trying to achieve? Do you want to edit the grid column data inside the directive? — Mihail Stancescu
For now, I was just trying to do the R-O template, but eventually, I would also bind a different directive in the editor template. But the directive has 2 way binding. — Matt

Mihail Stancescu Mihail Stancescu · Accepted Answer · 2017-01-30T20:59:12

For a R-O template you can try it like this:

columns: [
    { field: "name", title: "Name" },
    { field: "description", title: "Description" },
    { field: "managerName", title: "Manager",
        template: function (dataItem) {
            //what I care about is dataItem.prop1
            var scope = angular.element("idofelement_with_your_scope").scope();
            scope.someAngularScopeObject = dataItem.prop1;
            return ("<custom-directive ng-model='someAngularScopeObject'>
                     </custom-directive>");     
    }
}]

I haven't tested it but is should do the job. The idea is that in the template function you have a value and in the directive you need an property/object to bind to.

How to use Angular directive inside Kendo Grid Column

1 Answers