JSFiddle - React, Tailwind, and code Playground

by jamiephipps

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.web.min.js"></script>
<!DOCTYPE html>
<body>
    <button onclick="onChange1Click()">Change 1</button>
    <button onclick="onChange2Click()">Change 2</button>
    <div id="app"></div>
</body>

JavaScript

// Layout
        var layout = new kendo.Layout("<div id='layout'><div id='content_wrapper'></div></div>");

        var view1 = new kendo.View("<div id='dropdownlist1' data-role='dropdownlist'></div>");
        var view2 = new kendo.View("<div id='dropdownlist2' data-role='dropdownlist'></div>");
        // var commonView;

        $(document).ready(function (e) {

            kendo.init("#app");
            layout.render($("#app"));

        });

        function onChange1Click(e) {
            // var view1 = new kendo.View("<div id='dropdownlist1' data-role='dropdownlist'></div>");
            // var commonView = new kendo.View("<div id='dropdownlist1' data-role='dropdownlist'></div>");
            layout.showIn("#content_wrapper", view1);
            // view1.destroy();
            alert(view1);
        }

        function onChange2Click(e) {
            // var view2 = new kendo.View("<div id='dropdownlist2' data-role='dropdownlist'></div>");
            // var commonView = new kendo.View("<div id='dropdownlist2' data-role='dropdownlist'></div>");
            layout.showIn("#content_wrapper", view2);
            // view2.destroy();
            alert(view2);
        }