JSFiddle - React, Tailwind, and code Playground

by Hitesh Yadav

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/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/2011.3.1129/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.min.js"></script>
<div class="demo-section">
                <h3 class="title">DropDownList</h3>
                <input id="dropdownlist"/>
            </div>
            <div class="demo-section">
                <h3 class="title">Console log</h3>
                <div class="console"></div>
            </div>

CSS

.demo-section {
                    width: 500px;
                    text-align: center;
                }
                .demo-section .k-dropdown {
                    text-align: left;
                }
                .console {
                    margin: 0;
                }

JavaScript

$(document).ready(function() {
                    function onOpen() {
                        kendoConsole.log("event: open");
                    };

                    function onClose() {
                        kendoConsole.log("event: close");
                    };

                    function onChange() {
                        kendoConsole.log("event: change");
                    };

                    function onSelect(e) {
                        if ("kendoConsole" in window) {
                            var dataItem = this.dataItem(e.item.index());
                            kendoConsole.log("event :: select (" + dataItem.text + " : " + dataItem.value + ")" );
                        }
                    };

                    var data = [
                        {text: "Item1", value:"1"},
                        {text: "Item2", value:"2"},
                        {text: "Item3", value:"3"}
                    ];

                    $("#dropdownlist").kendoDropDownList({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: data,
                        select: onSelect,
                        change: onChange,
                        close: onClose,
                        open: onOpen
                    });
                });