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="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<div id="example" ng-app="Test">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions"></kendo-grid>
</div>
</div>
CSS
.k-widget {
font-size: 10px;
font-family: 'Segoe UI'
}
JavaScript
var app = angular.module("Test", ["kendo.directives"]);
app.controller("MyCtrl", [
"$scope", "$http",
function($scope, $http) {
var _crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service";
$scope.mainGridOptions = {
dataSource: {
transport: {
read: {
url: _crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: _crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: _crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: _crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
pageSize: 5,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: {
type: "number",
validation: { required: true, min: 1 }
},
Discontinued: { type: "boolean" },
UnitsInStock: {
type: "number",
validation: { min: 0, required: true }
...