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://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular-resource.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", "ngResource"]);

app.controller("MyCtrl", function($scope, dataAccessServices) {
  var productResource = dataAccessServices.getProductResource();
  $scope.mainGridOptions = {
    pageable: true,
    dataSource: {
      pageSize: 2,
      schema: {
        data: "Result", //THIS IS IMPORTANT!
        total: "Count" //THIS IS IMPORTANT!
      },
      transport: {
        read: function(options) {
          productResource.get(data => { //using get as my server returns an object.
            options.success(data);
          });
          /*since their server returns a plain array then they should do:
          	productResource.query(data => {
          		options.success({Result:data, Count:data.length});
          	});
          */
        }
      },
    },
    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"
    }]
  };
});

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

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

  }

class DataAccessService
  implements IDataAccessService {

    static $inject = ["$resource"];
    constructor(private $resource: ng.resource.IResourceService) {
    }

    getProductResource(): ng.resource.IResourceClass<IProductResource> {
      return this.$resource("https://api.everlive.com/v1/0thd9umfu4rb3e09/products/:productId");
    }
  }
app.service("dataAccessServices", DataAccessService);