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

// Set up the dropdown data that will eventually be remote data
var itemdata = [];
for (var i = 0; i < 1000; i++)
    itemdata.push({ Name: "Item #" + i, ID: i });

var itemsDS = new kendo.data.DataSource( {
    data: itemdata
} );

// Now set up the product data that will eventually be remote data
var productdata = [];
for (var i = 0; i < 4000; i++)
    productdata.push( { Name: "Item #" + i,  price: i,  unitsInStock: i,  items: itemsDS } );

var productsDS = new kendo.data.DataSource( {
    data: productdata,
    pageSize: 10
});

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

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