Kendo UI grid with angular - curly brackets not binding value in column template

1
votes

I just started using kendo-ui grid and have created my columns and everything works with data coming back. I tried adding in a template value to my column definitions and the kendo docs say that I should be able to use {{dataItem.something}} to access the value in a template. This does NOT work. However doing <span ng-bind='dataItem.something'></span> works fine. Why is this, and how can I get the curly braces binding working? Thanks.

Here is a snippet of pseudo code for what I'm doing:

in my html and controller ( I am omitting all the other options like datasources etc..): 

this.gridOptions = {
       columns: [ 
        {
          field: 'valueOne',
          template: "<span ng-bind='dataItem.valueOne'></span>" // THIS WORKS
        },
        {
          field: 'valueTwo',
          template: "{{dataItem.valueTwo}}" // THIS DOES NOT WORKS
        }
      ]
    };
<div ng-controller="gridController as vm">   
    <div kendo-grid k-options="vm.gridOptions"></div>
</div>

What I'm attempting is right from the kendo documentation and demos:
http://docs.telerik.com/kendo-ui/AngularJS/the-grid-widget#template‌​s
http://dojo.telerik.com/ikEKIr

2
angularjskendo-uikendo-grid

2 Answers

0
votes

TL;DR; By removing kendo-angular.js the binding is working as expected. kendo-angular.js library was still being included in our build and was conflicting with kendo.all.js

More: The kendo-angular.js library was deprecated and support was moved to kendo professional. The angular functionality was moved into kendo.all.js. The docs are very specific about including libraries in a specific order. The include order must be JQuery, Angular, then Kendo. I checked this and made sure to try the latest versions of all scripts, also tried using the specific versions used in the demos. However after digging a bit further into our scripts it turns out that our build scripts were still including kendo-angular.js farther down the list. Removing this fixed my issue.

-1
votes

You cannot use angular templates after app was initialized, when you inserting new HTML angular will ignore it.

Kendo have own templating tags for it:

There are three ways to use the hash syntax:

  • Render values as HTML: #= #.
  • Use HTML encoding to display values: #: #.
  • Execute arbitrary JavaScript code: # if (true) { # ... non-script content here ... # } #.

Also you can use functions as templates:

template:   
    function (e) {
                if (e.type !== 1)
                    return "";
                return '<input type="checkbox"' + (e.canExecute ? 'checked="checked"' : '') + 'disabled="disabled" />';
            }

You also can check out docs for more info