JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
    <table id="products2" data-role="grid" data-row-template="row-template" data-bind="source: products" class="metrotable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Units</th>
                <th><button class="k-button" data-bind="click: doSomething">Button</button></th>
            </tr>
        </thead>
    </table>      
</div>

<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name">
        </td>
        <td>
            #: kendo.toString(get("price"), "C") #
        </td>
        <td data-bind="text: unitsInStock"></td>
        <td></td>
    </tr>
</script>

JavaScript

var viewModel = kendo.observable({
    productName: "Product name",
    productPrice: 10,
    productUnitsInStock: 10,
    doSomething: function(e) {
        alert("Something is being done!");            
    },
    products: [
        { name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
        { name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
        { name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
        { name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
    ]
});

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