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.

Answer 1

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>