This is a migrated thread and some comments may be shown as answers.

Formatting lost when applying template for second time

1 Answer 140 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
mg1970
Top achievements
Rank 1
mg1970 asked on 11 Jan 2013, 07:10 PM
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");


1 Answer, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 15 Jan 2013, 09:49 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
mg1970
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or