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">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id='example'>
<select id="ddl1" data-role="dropdownlist" data-text-field="Name" data-value-field="Id"
        data-bind="source: data1, value: myId1, events: { change: onChange }"></select>

<select id="ddl2" data-role="dropdownlist" data-text-field="Name" data-value-field="Id"
        data-bind="source: data2, value: myId2"></select>
            
<!-- Is there a way to use a filter somehow within the select widget?
   data-source="{filter: {field:'Id', operator:'ne', value: this.myId1}}"         
-->

JavaScript

jQuery(document).ready(function($) {
    var dsData1 = [{Id:"1", Name:"A"},{Id:"2", Name:"B"},{Id:"3", Name:"C"}],
        dsData2 = [{Id:"1", Name:"a"},{Id:"2", Name:"b"},{Id:"3", Name:"c"}];
    
        
    var viewModel = kendo.observable({
        data1: new kendo.data.DataSource({
            data: dsData1
        }),
        data2: new kendo.data.DataSource({
            data: dsData2
        }),
        myId1:1,
        myId2:1,
        onChange: function(e) {
            var dropdown1 = e.sender,
                dropdown2 = $("#ddl2").data("kendoDropDownList");
            
            dropdown2.dataSource.filter({field: "Id", operator: "ne", value: dropdown1.value()});
        }
    })
    kendo.bind($('#example'), viewModel);    

});