JSFiddle - React, Tailwind, and code Playground

by darrenarbell

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-bind="source: products"
    />
</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>
    </tr>
</script>

JavaScript

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

var itemDS = 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 < 80; i++)
    productdata.push( { 
        Name: "Item #" + i,  
        price: i,  
        unitsInStock: i
    } );

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

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

function itemEditor(container, options) {
    $('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "Name",
        dataSource: itemDS
    });
}

$("#wfp").kendoGrid( {
    columns: [{"field": "Name", "title":"Name of Product", "width": 250, editor: itemEditor }, "price", "unitsInStock" ],
    pageable: true,
    editable: true
});

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