JSFiddle - React, Tailwind, and code Playground

by krustev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<form id="mainForm">
<div id="window" style="display:none">
<input ID="ddlPopupCountry"/>
<br />
<input ID="ddlPopupLanguage"/>
<br />
</div>


<div>
    <input type="button" id="btn" value="Open window"  />
</div>
</form>

JavaScript

var countryData = [{"value":1,"text":"Russia"},{"value":2,"text":"Ukraine"}];
            var countryLanguageData = 
                [{"LanguageName":"en-US","LanguageFullName":"English","value":1},
                 {"LanguageName":"en-US","LanguageFullName":"English","value":2},
                 {"LanguageName":"ru-RU","LanguageFullName":"Russian","value":1},
                 {"LanguageName":"ru-RU","LanguageFullName":"Russian","value":2},
                 {"LanguageName":"uk-UA","LanguageFullName":"Ukrainian","value":2}];
            
            var window = $("#window");
            if (!window.data("kendoWindow")) {
                window.kendoWindow({
                    width: "350px",
                    title: "Title",
                    appendTo: "#mainForm"
                });
            }

           $("#ddlPopupCountry").kendoDropDownList({
                optionLabel: "Select...",
                dataTextField: "text",
                dataValueField: "value",
                dataSource: countryData,
                popup: {
                    appendTo: "#mainForm"                            
                }
            });

            $("#ddlPopupLanguage").kendoDropDownList({
                autoBind: false,
                cascadeFrom: "ddlPopupCountry",
                optionLabel: "Select...",
                dataTextField: "LanguageFullName",
                dataValueField: "LanguageName",
                dataSource: countryLanguageData,
                popup: {
                    appendTo: "#mainForm"                            
                }
            });

            $("#btn").bind("click", function() {
                $('#window').data('kendoWindow').open(); 
                return false;
            });