Kendo UI MVVM with different templating engine

Question

I have read in multiple places that it is possible to use Kendo UI's MVVM system with a different templating engine.

I love Kendo, I love the widgets, and I love the simple View Models - but I hate their templates. They are very restrictive.

But what I am having trouble is finding any way to do this; I would love to use AngularJS for templates ... but I don't want it for anything beyond that. I'm not interested in declaratively calling all of my widgets from Angular, I just need to be able to databind widgets to the kendo view models, and use Angular to render repeater sections and such.

Is this possible? I have seen the AngularJS-Kendo project and it doesn't seem to do what I am trying. It is just for declarative widget binding.

I have had nothing but trouble with Kendo's templates. I find it very strange how they justify the bare-bones templating with performance! It's SO MUCH faster! when performance doesn't seem to be their priority with any of the widgets and ViewModels they make. Usually simplicity and ease of use come first with Kendo. — Bryce Johnson

Lars Höppner Lars Höppner · Accepted Answer · 2013-11-24T12:02:33

I'm not completely sure what you have in mind, but here are my thoughts on this. I don't think there's a way to separate the use of Angular's templates from using their concept of controllers and models.

So, you'd probably have to find a way to integrate your view models with those. I don't know if this helps you, but I've slapped together a simple (and possibly clumsy) example of combining a Kendo view model with Angular templates as well as using the same view model with a Kendo drop-down list:

HTML

  <div ng-controller="MainCtrl">
      <clickable items="items"></clickable>
      <ul>
          <li ng-repeat="item in items.slice(0,items.length)">
              {{ item.text }} ({{ item.value }})
          </li>
      </ul>
  </div>

JavaScript

app = angular.module('app', []);

var items = [
             { text: "test 0", value: 0},
             { text: "test 1", value: 1}
            ];

var viewModel = kendo.observable({
    items: items
});

viewModel.bind("change", function(e) {
  console.log("change");
});

app.controller('MainCtrl', function($scope) {
  $scope.items = viewModel.get("items");
});

app.directive('clickable', function() {  
  return {
      restrict: "E",
      scope: {
          items: '='
      },
      template: "<button>Click to Add</button>",
      link: function(scope, element, attrs) {
          element.bind('click', function() {
              var index = scope.items.length;
              var text =  "test " + index;
              scope.items.push({ text: text, value: index});

              scope.$apply();
          });
      }
  };
});

$("#tree").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: viewModel.get("items"),
    change: function (e) {
        console.log("dropdown value change: " + this.value());
    }
});

Corresponding JSBin: http://jsbin.com/UBuPUwOq/5/edit

Angular-Kendo basically simplifies some things so you don't have to imperatively create the widgets. Instead, you can create them in a way which integrates with Angular controllers and models:

<select kendo-drop-down-list
        k-option-label="'Select A Thing'"
        k-data-text-field="'name'"
        k-data-value-field="'id'"
        k-data-source="things"></select>

Kendo UI MVVM with different templating engine

1 Answers