JSFiddle - React, Tailwind, and code Playground

by blackhawk

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="content" >
    <div id="wfp" data-role="grid" 
        data-columns='[{"field": "Name", "title":"Name of Product"}, "price", "unitsInStock", {"command": "destroy"} ]'
        data-bind="source: products"
    data-row-template="row-template" />
</div>
        
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td>
            <select data-role="dropdownlist"
                    data-text-field="Name" 
                    data-value-field="Name" 
                    data-bind="source: items"/>
        </td>
        <td>#: kendo.toString(get("price"), "C") #</td>
        <td data-bind="text: unitsInStock">
        </td>
    </tr>
</script>

JavaScript

var viewModel = {
    productName: "Product name",
    productPrice: 10,
    productUnitsInStock: 10,
    products: [
        { Name: "Chai", price: 18.00, unitsInStock: 39 },
        { Name: "Chang", price: 19.00, unitsInStock: 17 },
        { Name: "Mishi Kobe Niku", price: 97.00, unitsInStock: 29 },
        { Name: "Sir Rodney's Scones", price: 10.00, unitsInStock: 3 }
    ],
    items: [
        { Name: "Chai" },
        { Name: "Chang" },
        { Name: "Mishi Kobe Niku" },
        { Name: "Sir Rodney's Scones" },
    ]    
};

kendo.bind($('#wfp'), viewModel);