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>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
<div id="grid"></div>
JavaScript
//grid data
var products = [{
"ProductID": 1,
"ProductName": "Chai",
"Category": "Beverages",
"UnitPrice": "18.00"},
{
"ProductID": 2,
"ProductName": "Chang",
"Category": "Beverages",
"UnitPrice": "19.00"},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"Category": "Condiments",
"UnitPrice": "10.00"},
{
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"Category": "Condiments",
"UnitPrice": "22.00"},
{
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"Category": "Condiments",
"UnitPrice": "21.35"},
{
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"Category": "Condiments",
"UnitPrice": "25.00"}];
//comboBox data
var categoryDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
}
});
//comboBox editor
function categoryDropDownEditor(container, options) {
$('<input data-text-field="CategoryName" data-value-field="CategoryName" data-bind="value:' + options.field + '"/>').appendTo(container).kendoComboBox({
autoBind: false,
dataSource: categoryDataSource
});
}
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
pageSize: 30,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
Category: "Category",
UnitPrice: {
type: "number",
validation: {
required: true,
...