JSFiddle - React, Tailwind, and code Playground

by korchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
Categories: <input id="categories" /> 

Products: <input id="products" />

JavaScript

var categoriesDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            // this is just a mock up to simulate a remote data source. DO NOT use the "read" configuration in your code. Use your real php page as "url"
            url: "/echo/json/", // "/echo/json/" returs whatever you pass to it (jsFiddle specific)
            type: "POST",
            dataType: "json",
            data: { // this is the data which /echo/json will return (simulates a remote data source)
                json: JSON.stringify([{
                    categoryId: 1,
                    categoryName: "Food"},
                {
                    categoryId: 2,
                    categoryName: "Drinks"}])
            }
        }
    }
});

var productsDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            // this is just a mock up to simulate a remote data source. DO NOT use the "read" configuration in your code. Use your real php page as "url"
            url: "/echo/json/",
            type: "POST",
            dataType: "json",
            data: {
                json: JSON.stringify([{
                    productId: 1,
                    productName: "Bread",
                    categoryId: 1 // Bread is Food
                    },
                    {
                    productId: 2,
                    productName: "Ham",
                    categoryId: 1 // Ham is Food too
                    },
                    {
                    productId: 3,
                    productName: "Milk",
                    categoryId: 2 // Milk is Beverage
                    },
                    {
                    productId: 4,
                    productName: "Coffee",
                    categoryId: 2 // Coffee is Beverage too
                    }
                ])
            }
        }
    }
});

$("#categories").kendoComboBox({
    dataSource: categoriesDataSource,
    dataTextField: "categoryName",
    dataValueField:...