How to use function in Kendo Grid Column Template with AngularJS

Warning: Don't have access to Kendo to test the code at the moment, but this should be very close

In your case, you are assigning a a string to the value of k-columns and that string contains the the word function and your curly brace {

You need to make sure the function gets executed ... something like this:

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

Note the difference:

We create an object -- a real honest-to-goodness object, and we use an IIFE to populate the template property.

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.