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">
        <script type="text/x-kendo-template" id="template">
  <button kendo-button 
    ng-click="createNewEntry($event)">Create</button>                
</script>

<div kendo-grid k-options="optLoanGrid"></div>

    </div>
</div>

JavaScript

angular.module("Test", [ "kendo.directives" ]);
    function MyCtrl($scope) {
        $scope.createNewEntry = function(event) {
        event.preventDefault();
            
        alert('Add This Content');

        $scope.optLoanGrid.add({
            Name: 'Enteng',
            Code: '12312'
        });        
    }

    $scope.optLoanGrid = {
        dataSource: {
            data: [
                {
                    Name: 'Enteng Dagpin',
                    Code: '123123'
                }
            ],
            schema: {
                model: {
                    id: 'LoanID',
                    fields: {
                        LoanID: { editable: false, defaultValue: 0 },
                        Name: { type: 'string' },
                        Code: { type: 'string' }
                    }
                }
            },
            pageSize: 5
        },
        sortable: true,
        selectable: "single",
        editable: "inline",
        toolbar: kendo.template($("#template").html()),
        change: function(a) {
            var item = this.dataItem(this.select());

            console.log(item);            
        },
        columns: [
            "Name",
            "Code",
            {
                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
            }
        ]
    };
    }