JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1024/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1024/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1024/js/kendo.all.min.js"></script>
<div id="grid" 
    data-role="grid"
    data-bind="source: ds"
    data-toolbar='[{ "name": "customCreate", imageClass: "k-add", iconClass: "k-icon", "text": "Add new record", "attr": "data-bind=\"click: customCreate\"" }]'
    data-pageable="true"
    data-columns='[{ "field": "foo" }, { "command": [{"name": "custom", "attr":"data-bind=\"click: onClick\""}] }]'>
</div>

JavaScript

var viewModel = kendo.observable({
    ds: new kendo.data.DataSource({
        pageSize: 2,
        data: [
            {foo: 1},
            {foo: 2},
            {foo: 3},
            {foo: 4},
            {foo: 5},
            {foo: 6},
            {foo: 7}
        ]
    }),
    onClick: function(e) {
        console.log("click VM", this);
    },
    customCreate: function(e) {
        console.log("customCreate");
    }
});

kendo.bind($("#grid"), viewModel);
kendo.bind($("#grid .k-grid-toolbar"), viewModel);