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>

JavaScript

var app = angular.module("Test", [ "kendo.directives" ]);
app.controller("MyCtrl", ["$scope", function($scope){
    $scope.$on("kendoRendered", function (event, widget) {
        $scope.grdTesting.dataSource.data([
            {
                dataID: 1,
                Name: 'Enteng',
                Code: '123217'
            },
            {
                dataID: 2,
                Name: 'Vincent',
                Code: '712321'
            }]);
    });

    $scope.optTesting = {
        editable: 'popup',
        pageable: true,
        dataSource: {
            data: [],
            schema: {
                model: {
                    id: 'DataID',
                    fields: {
                        LoanID: { editable: false, defaultValue: 0 },
                        Name: { type: 'string' },
                        Code: { type: 'string' }
                    }
                }
            },
            pageSize: 5
        },
        sortable: true,
        toolbar: [ "create" ],
        columns: [
            "Name",
            "Code",
            {
                command: [
                    {
                        id: "edit",
                        name: "edit",
                        template: "<a class='k-button k-grid-edit' href='' style='min-width:16px;'><span class='k-icon k-edit'></span></a>"
                    }
                ],
                title: " ",
                width: 48
            },
            {
                command: [
                    {
                        id: "destroy",
                        name: "destroy",
                        template: "<a class='k-button k-grid-delete' href='' style='min-width:16px;'><span class='k-icon k-delete'></span></a>"
                    }
                ],
                title: " ",
                width: 48
            }
        ]
    };
}]);