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: "Poject #" + 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,
    batch: true,
    aggregate: [{
        field: "price",
        aggregate: "sum"},
    {
        field: "unitsInStock",
        aggregate: "sum"}]
});

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},
    {
        field: "price",
        title: "Price",
        footerTemplate: "Total"}, "unitsInStock"],
    pageable: false,
    editable: true,
    scrollable: true,
});

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