JSFiddle - React, Tailwind, and code Playground

by nukefusion

HTML

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

CSS

.k-readonly
                {
                    color: gray;
                }

JavaScript

$(function() {

     var categoryData = [
        { categoryId: 1,  categoryName: "Category1" },    
        { categoryId: 2,  categoryName: "Category2" },
    ];

     var productData = [
        { categoryId: 1,  productId: 1,  productName: "Product1" },    
        { categoryId: 1,  productId: 2,  productName: "Product2" },    
    ];

    var categoryDatasource = new kendo.data.DataSource({
        data: categoryData
    });

    var productDatasource = new kendo.data.DataSource({
        data: productData
    });

     $("#categories").kendoComboBox({
        placeholder: "Select category...",
        dataTextField: "categoryName",
        dataValueField: "categoryId",
        dataSource: categoryDatasource
    });

    var products = $("#products").kendoComboBox({
        cascadeFrom: "categories",
        placeholder: "Select product...",
        dataTextField: "productName",
        dataValueField: "productId",
        dataSource: productDatasource
    }).data("kendoComboBox");
     
    products.bind("dataBound", function (e) {
        this.enable(false);
        this.close();
    });
 });