Append HTML on any Kendo control appears without design

2 posts, 0 answers
  1. Hamad
    Hamad avatar
    2 posts
    Member since:
    Sep 2013

    Posted 09 Oct 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 11 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top