JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<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">
<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>


<div id="example" ng-app="KendoDemos">
  <div ng-controller="MyCtrl">
    <kendo-grid options="mainGridOptions">
    </kendo-grid>
  </div>
</div>

CSS

html {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
  }

TypeScript

var app = angular.module("KendoDemos", ["kendo.directives"]);
app.controller("MyCtrl", function($scope, dataAccessService) {
  var productResource = dataAccessService.getProductResource();
  $scope.mainGridOptions = {
    pageable: true,
    dataSource: {
      pageSize: 2,
      schema: {
        data: "arbitraryDataProperty", //THIS IS IMPORTANT!
        total: "totalItems" //THIS IS IMPORTTANT!
      },
      transport: {
        read: function(options) {
          productResource.query(options.success)
        }
      },
    },
    columns: [{
      field: "productId",
      title: "Product ID",
      width: "90px"
    }, {
      field: "productCode",
      title: "Product Code",
      width: "110px"
    }, {
      field: "productRelease",
      title: "Release",
      width: "200px"
    }, {
      field: "description",
      title: "Description"
    }]
  };
});

app.service('dataAccessService', function() {
  this.getProductResource = function() {
    return {
      query: function(callback) {
        var arbitraryJsonObject = {
          totalItems: 4,
          arbitraryDataProperty: [{
            productId: 1,
            productCode: "123",
            productRelease: "release 1",
            description: "my description"
          }, {
            productId: 2,
            productCode: "456",
            productRelease: "release 2",
            description: "my description"
          }, {
            productId: 3,
            productCode: "123",
            productRelease: "release 3",
            description: "my description"
          }, {
            productId: 4,
            productCode: "123",
            productRelease: "release 4",
            description: "my description"
          }, ]
        };
        $.ajax('/echo/json/', {
          method: "POST",
          data: {
            json: JSON.stringify(arbitraryJsonObject)
          }
        }).done(callback);
      }
    };
  };
});