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-editable='{"destroy":true}'
        data-columns='[{"field": "Name", "title":"Name of Product", "width": 250 }, "price", "unitsInStock", {"command": "destroy"} ]'
        data-bind="source: products"
    data-row-template="row-template"
    data-pageable="true"
    />
</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, value: this"></select>
        </td>
        <td>#: kendo.toString(get("price"), "C") #</td>
        <td data-bind="text: unitsInStock">
        </td>
        <td>
              <a class="k-button k-button-icontext k-grid-delete" href="\#"><span class="k-icon k-delete"></span>Delete</a>                            
        </td>
    </tr>
</script>

JavaScript

var viewModel = {
    productName: "Product name",
    productPrice: 10,
    productUnitsInStock: 10,
    products: [],
    items: []
};

for (var i = 0; i < 1000; i++)
    viewModel.items.push({ Name: "Item #" + i, ID: i });

for (var i = 0; i < 400; i++)
    viewModel.products.push({ Name: "Item #" + i, price: i, unitsInStock: i, items: viewModel.items });

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