JSFiddle - React, Tailwind, and code Playground
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("<select id='dropdownlist1' data-role='dropdownlist'><option>Item1</option></select>", {
hide : function() {
if (view2.element) {
kendo.destroy(view2.element.children());
view2.destroy();
delete view2.element;
}
}
});
var view2 = new kendo.View("<select id='dropdownlist2' data-role='dropdownlist'><option>Item2</option></select>", {
hide : function() {
if (view1.element) {
kendo.destroy(view1.element.children());
view1.destroy();
delete view1.element;
}
}
});
// 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);
}