Hello
I have the following drawer
<!--left-drawer-->
<div data-role="drawer" id="left-drawer" data-title="Global Menu">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<ul data-role="listview" data-type="group">
<li>Global Menu
<ul>
<li data-icon="share"><a href="#drawer-home" data-transition="none">Inbox</a></li>
<li data-icon="share"><a href="#drawer-starred" data-transition="none">Starred Items</a></li>
</ul>
</li>
<li>Sub Menu
<ul id="ResultDiv2">
</ul>
</li>
</ul>
</div>
<!--//left-drawer-->
<div data-role="view" id="about" data-layout="drawer-layout" data-title="About">
about dummy text
</div>
<script>
new kendo.mobile.Application();
</script>
When you bind the drawer from inside Document.Ready everything is working fine and the design appears correctly, but if you bind the drawer on any event like click then the design will not appear correctly.
Here is my code
$(document).ready(function () {
After();
});
function After() {
var template = kendo.template('<li data-icon="share" onclick="After();"><a href="#:url#" data-transition="none"><span></span>#:name#</a></li>');
var data = [
{ url: '#about', name: 'Menu' },
{ url: '#about', name: 'Customer' },
{ url: '#about', name: 'Generate again'}];
var result = kendo.render(template, data);
//alert(result);
$("#ResultDiv2").append(result);
}
you can check that on the following website
IN4ELECTRONICS
Regards