JSFiddle - React, Tailwind, and code Playground
by Ignacio Fuentes
HTML
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.bootstrap.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
</kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", function($scope) {
var someFetchDataFunction = function(options) {
var arbitraryJsonObject = {
somePropertyTheGridMightNotNeed: "TEST",
someOtherPropertyThatCameBackFromTheServer: "FOO",
totalItems: 4,
arbitraryDataProperty: [{
FirstName: "John",
LastName: "Doe"
}, {
FirstName: "Jane",
LastName: "Doe"
}, {
FirstName: "Jameson",
LastName: "Doe"
}, {
FirstName: "Johnson",
LastName: "Doe"
}, ]
}
$.ajax('/echo/json/', {
method: "POST",
data: {
json: JSON.stringify(arbitraryJsonObject)
}
}).done(options.success)
}
$scope.mainGridOptions = {
pageable: true,
dataSource: {
pageSize: 2,
schema: {
data: "arbitraryDataProperty", //THIS IS IMPORTANT!
...