JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-header" ng-controller="MyCtrl">
<h4>Select Customer</h4>
<select kendo-multi-select k-options="selectOptions" k-ng-model="selectedIds"></select>
</div>
</div>
JavaScript
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.selectOptions = {
placeholder: "Select products...",
dataTextField: "ContactName",
dataValueField: "CustomerID",
valuePrimitive: true,
autoBind: false,
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers",
}
},
group: { field: "Country" }
}
};
})