JSFiddle - React, Tailwind, and code Playground

by Vincent Dagpin

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">
        <div kendo-grid="grdTesting" k-options="optTesting"></div>
    </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){
    $scope.$on("kendoRendered", function (event, widget) {
        console.log('Widgets loaded');  
        console.log('Request data [Test Only]');
        
        $http.jsonp("http://entengcdn.apphb.com/api/user")
            .success(function(r) {
                console.log('Request Success [Test Only]');
                console.log(r);
            })
            .error(function(err){
                console.log('Request Error [Test Only]');
                console.log(err);
            });
    });
        
    $scope.optTesting = {
        editable: 'popup',
        pageable: true,
        dataSource: {
            transport: {
                read: {
                    url: 'http://entengcdn.apphb.com/api/user',
                    dataType: 'jsonp',
                    contentType: 'application/json'
                }
            },
            schema: {
                model: {
                    id: 'DataID',
                    fields: {
                        UserID: { editable: false, defaultValue: 0 },
                        FullName: { type: 'string' },
                        CivilStatus: { type:'number', defaultValue: 0 },
                        
                    }
                }
            },
            pageSize: 5,
            requestStart: function(e) {
                console.log('Request Start [Grid]..');
            },
            requestEnd: function(e) {
                console.log('Request End [Grid]..');
            },
        },
        sortable: true,
        toolbar: [ "create" ],
        columns: [
            "FullName",
            {
                title: 'Status',
                template: "#= CivilStatus == 1 " +
                    "? 'Married to: ' + SpouseName " +
                    ": 'Forever Alone' #"
            },
            {
                command: [
                   ...