How to use function in Kendo Grid Column Template with AngularJS

I have a column in a Kendo grid that I want to perform some specific logic for when rendering, and am using Angular. I have the grid columns set up using the k-columns directive.

After looking at the documentation, it seemed simple: I could add the template option to my column, define the function to perform my logic, and pass the dataItem value in. What I have looks something like this:

k-columns='[{ field: "Name", title: "Name", 
    template: function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
    }
}]'

However, running this causes a syntax error complaining about the character ‘{‘ that forms the opening of the block in my function.

I have seen several examples of defining a template function in this format. Is there something else that needs to be done for this to work? Am I doing something incorrectly? Is there another way of defining the template as a function and passing the column data to it? (I tried making a function on my $scope, which worked, except I couldn’t figure out how to get data passed into the function.)

Thank you for your help.

Answer

It appears that defining a column template in this fashion isn’t supported when using AngularJS and Kendo. This approach works for projects that do not use Angular (standard MVVM), but fails with its inclusion.

The workaround that a colleague of mine discovered is to build the template using ng-bind to specify a templating function on the $scope, all inside of a span:

template: "<span ng-bind=templateFunction(dataItem.Name)>#: data.Name# </span>"

This is the default column templating approach that is implemented by Telerik in their Kendo-Angular source code. I don’t know yet if the data.Name value is required or not, but this works for us.