Append HTML on any Kendo control appears without design

[Hamad]

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

[Alexander Valchev]

Hello Hamad,

Dynamic appending of HTML is not supported. Kendo Mobile widgets should be initialized via data attributes in the mark-up or via JavaScript at the init event of the corresponding view. If the widget's HTML is rendered and appended to the DOM after View initialization has passed, it will not be enhanced or styled.

Could you please provide more details about your exact scenario? In case your aim is to just to add or remove ListView items, then please consider using ListView bound to DataSource. In this way you will be able to use the DataSource insert and remove methods which will allow you to modify the displayed items easily.

Regards,
Alexander Valchev
Telerik