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
– Mihail Stancescu, Commented Jan 30, 2017 at 20:53
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
– Matt, Commented Jan 30, 2017 at 20:54

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

1

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.

answered Jan 30, 2017 at 20:59

Mihail Stancescu

4,1681 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use Angular directive inside Kendo Grid Column

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related