JSFiddle - React, Tailwind, and code Playground
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>
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,
schema: {
model: {
fields: {
"Name": { type: "string" },
"price": { type: "number" },
"unitsInStock": { type: "number" }
}
}
},
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)
.kendoComboBox({
dataTextField: "Name",
dataValueField: "Name",
dataSource: itemDS
});
}
function itemEditor2(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
dataTextField: "Name",
dataValueField: "Name",
dataSource: itemDS
});
$('<p>sdsads</p>')
.appendTo(container);
}
$("#wfp").kendoGrid( {
columns: [
{"field": "Name", "title":"Name of Product", "width": 250, editor: itemEditor }, "price",
"unitsInStock",
{field: "Name" , title: "dasd" , template: '<input data-bind="value: Name"/>Das ist ein Test: #:Name#', editor: itemEditor2}
],
pageable: true,
editable: true,
navigatable: true
});
kendo.bind($('#wfp'), viewModel);