Formatting lost when applying template for second time

[mg1970]

The kendo UI formatting gets lost when the same screen / template gets displayed for a second time.

On the first visit, the screen (attachment screenshot-1.png) shows the listview nicely formatted.

Then, the user clicks on the "Back" button and then redisplays the screen. The second time, the same screen shows with all formating stripped out (attached screenshot-2.png). When looking at the DOM tree, several wrapped kendo DIV elements are missing - like the ones with class km-scroll-container and km-listview-wrapper.

Any help greatly appreciated. A standalone test HTML page is also attached. Very easy to reproduce: just click on "View jail cards", go back, and click "View jail cards" again.

Here is the snippet that applies the template and navigates to that screen:

var templateContent = $("#tmpl_jailcard").html();
var template = kendo.template(templateContent);
$("#scr_jailcard").html(template(data));
app.navigate("#scr_jailcard");<br>

Another way to reproduce the error is to apply the templating and navigation twice, like this:

var templateContent = $("#tmpl_jailcard").html();
var template = kendo.template(templateContent);
$("#scr_jailcard").html(template(data));
app.navigate("#scr_jailcard");

// The following simulates the problem by re-applying template and navigating to it
$("#scr_jailcard").html(template(data));
app.navigate("#scr_jailcard");


[Alexander Valchev]

Hello Guenther,

The problem comes from the fact that the View's mark-up is replaced which is not supported.

If I understood correctly you would like to display detailed information about selected item in another mobile View. In that case I recommend you to bind the template to the selected item via MVVM instead of re-rendering the template. Similar approach is used in this sample application (source code can be downloaded from here). I also recommend you to check this code library project as it demonstrates similar but more simplified scenario. Please pay attention to the showDetails function:

showDetails: function(e) {
    var product =  viewModel.dataSource.get(e.context);
    viewModel.set("selectedProduct", product); //sets the selected product
    app.navigate("#details"); //navigates to details view
}

And how the Details view is bound:

<div id="details" data-role="view" data-model="viewModel">
    <ul id="info" data-role="listview" data-style="inset">
        <li>
            Product Name:
            <span data-bind="text: selectedProduct.ProductName"></span>
        </li>
    </ul>
</div>

I hope this will help.

Regards,
Alexander Valchev
the Telerik team