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