How to dynamically generate a basic kendoUI widget?

Question

I'm facing an issue with Kendo UI:

When trying to generate a list dynamically (I want it to be a listView), with the onShow method. It doesn't seems to attach any of KendoUI functionnalities nor styling. like if the kendo "Widget generator" has already done its job and don't touch the newly added content.

In my case:

Here is the HTML:

    <div data-role="view" id="profile" data-title="Profile" data-layout="overview-layout" data-show="initProfile">
        <div id="profileContent"></div>

        She/He Might Like:
        <div data-role="scrollview" data-page="0">
            <div class="login-scrollV" id="page1" data-role="page">
            </div><div class="login-scrollV" id="page2" data-role="page">
            </div><div class="login-scrollV" id="page3" data-role="page">
            </div>
        </div>
    </div>

and with Mustache JS, I generate this content dynamically and append it to #profileContent

    <script id="profileTemplate" type="text/x-handlebars-template">

        <ul id="profileList" data-role="listview" data-style="inset" data-id="{{id}}" data-type="group">
            <li>Profile
                <ul>
                    <li><h2>{{firstname}} <span>{{lastname}}</span></h2><img src="{{picture}}" /></li>
                    <li>Gender <span class="sales-up">{{genre}}</span></li>
                    <li>Notation <span class="sales-up">Not Yet Ready</span></li>
                </ul>
            </li>
            <li>Center Of Interests
                <ul>
                    <li>Rock</li>
                    <li>Opera</li>
                    <li>Exhibitions</li>
                </ul>
            </li>
        </ul>

    </script>

In the end, the content is generated the way I told Mustache to do it but Kendo doesn't applu any of its functioannlity to this listView nor any style.

I understand why (I assume the html should be there from the beginning), so my question is: How Can I find a workaround to created a list View Dynamically with the onShow method with Mustache handlebars (ideally) that Kendo UI would recognize and then apply to it the list Views functionalities?

Many Thanks

Answer 1

You probably need to run kendo.bind or kendo.init on the profileContent div, after you populate it.