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, dataAccessServices) {
  var productResource = dataAccessServices.getProductResource();
  $scope.mainGridOptions = {
    pageable: true,
    dataSource: {
      pageSize: 2,
      schema: {
        data: "arbitraryDataProperty", //THIS IS IMPORTANT!
        total: "totalItems" //THIS IS IMPORTTANT!
      },
      transport: {
        read: function(options) {
          //options.success({arbitraryDataProperty:[]});
          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() {

  };
});

interface IDataAccessService {
  getProductResource(): ng.resource.IResourceClass<IProductResource>;
}

interface IProductResource
  extends ng.resource.IResource<app.domain.IProduct> {

  }

class DataAccessService
  implements IDataAccessService {
    getProductResource() {
      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,
   ...