JSFiddle - React, Tailwind, and code Playground

by valchev

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">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="example">
    <label>DropDown1</label>
    <input type="text" id="list1"
        data-role="dropdownlist"
        data-text-field="Name"
        data-value-field="Value"
        data-option-label="Select ..."
        data-bind="source: locationAttributeOne, value: attributeOneValue, events: {change: onChange1}" />
    
    <label>DropDown2</label>
    <input type="text" id="list2"
        data-role="dropdownlist" 
        data-text-field="Name"
        data-value-field="Value"
        data-option-label="Select ..."
        data-bind="source: locationAttributeTwo, value: locationAttributeTwoValue, events: {change: onChange2}" />
</div>

JavaScript

var viewModel = kendo.observable({
    locationAttributeOne: [
        {Name: "Item1", Value: "1"},
        {Name: "Item2", Value: "2"},
        {Name: "Item3", Value: "3"},
        {Name: "Item4", Value: "4"}
    ],
    locationAttributeTwo: [
        {Name: "Item1", Value: "1"},
        {Name: "Item2", Value: "2"},
        {Name: "Item3", Value: "3"},
        {Name: "Item4", Value: "4"}
    ],
    attributeOneValue: null,
    locationAttributeTwoValue: null,
    onChange1: function(e) {
        var dropdown = e.sender,
            item = dropdown.dataItem(); //get the dataItem
        
        dropdown.dataSource.filter([]); //clear filters
        $("#list2").data("kendoDropDownList") //filter with not equal to operator
            .dataSource.filter({field: "Value", operator: "neq", value: item.Value});
    },
    onChange2: function(e) {
        var dropdown = e.sender,
            item = dropdown.dataItem(); //get the dataItem
        
        dropdown.dataSource.filter([]); //clear filters
        $("#list1").data("kendoDropDownList") //filter with not equal to operator
            .dataSource.filter({field: "Value", operator: "neq", value: item.Value});
    }
});

kendo.bind($("#example"), viewModel);