<script type= "text/x-kendo-template" id="favoritesTemplate"> # for (var i = 0; i < data.length; i++) { # <li> <a onClick=showSwimmer('${data[i].SwimmerID}')>${data[i].Firstname + ' ' + data[i].Lastname}</a> <a data-role="detailbutton" data-icon="refresh"></a> </li> # } # </script>
It seems the widget in the template (in this case a detailbutton) is not really interpreted - and it never shows up in the final markup.
Is there any way to achieve this?
Thanks.
12 Answers, 1 is accepted
I am not sure what may cause the problem in your application. Basically, calling the kendo.init() after using the template should make it work. In case this is correctly implemented I would ask you to provide more details or better yet send a small but runnable project, that could be examined in details? Thank you in advance.
Kind regards,
Iliana Nikolovathe Telerik team
function loadFavorites(e) { var favorites = []; store.each(function (record, index) { var fav = { ... }; favorites.push(fav); }); var sortedFavorites = _.sortBy(favorites, function (favorite) { return favorite.Firstname }); var kendoTemplate = kendo.template($("#favoritesTemplate").text()); $("#favorites").html(kendoTemplate(sortedFavorites)); kendo.init($("#favorites")); };
Anything you can spot here?
Thanks!
In order to initialize mobile widgets, you will have to use kendo.mobile.init instead.
However (mostly) guessing from your code, you are trying to manually do something which is already pretty much supported in the mobile listview widget. I prepared a jsFiddle example demonstrating what I have in mind.
Kind regards,
Petyo
the Telerik team
thanks, that was it - both suggestions :)
Cheers.
<div data-role="layout" data-id="main-layout">
<div data-role="footer">
<div data-role="tabstrip">
..
..
</div>
I also have a header section that is used by only one view. For this purpose I define a header as an immediate child of the said view
<div id="myviewid" data-role="view" data-layout="main-layout" >
<div data-role="header" id="airportbriefheader">
<div data-role="navbar" id="airportbriefnavbar">
...
...
</div>
</div>
<div id="airportbriefView" data-role="content" class="km-content km-stretched-view"> ... </div>
</div>
Now, I would like to initialize the view after the main kendo app is been instantiated. For this purpose, I make an init call:
kendo.mobile.init($("#myviewid");
so that all the children of "myviewid" can be inititalized by kendo. Well, every widget inside the content gets inititalized fine, but the header itself is all messed up. The net result is that my tabstrip (on iOS) actually shows up at the top instead of the bottom and header appears out of place as well.
So my question is: is it not possible to initialize the header after kendo app has been inititalized? Other kendo widgets work fine but not header.
I am afraid that this type of initialization is not supported.
On a side note, as you correctly noted this question is not directly to the initial subject of this thread. As a good practice it is recommended to ask different questions in separate thread.
Thank you in advance for the understanding.
Regards,
Alexander Valchev
the Telerik team
<
div
id
=
"details"
data-role
=
"view"
data-title
=
"Details"
data-model
=
"viewModel"
>
<
div
class
=
"detailsPanel"
data-bind
=
"source: itemDetails"
data-template
=
"detailsTemplate"
></
div
>
<
script
id
=
"detailsTemplate"
type
=
"text/x-kendo-template"
>
<
h2
data-bind
=
"html: data.title"
></
h2
>
# if (data.photo) { #
<
img
src
=
"#:data.photo#"
title
=
"#:data.title#"
/>
# } #
<
p
data-bind
=
"html: data.description"
></
p
>
<
a
href
=
"\\#asDelete"
data-role
=
"button"
data-rel
=
"actionsheet"
data-actionsheet-context
=
"#:data.id#"
data-icon
=
"custom"
>Delete</
a
>
</
script
>
<
ul
id
=
"asDeleteItem"
data-role
=
"actionsheet"
>
<
li
><
p
>Delete <
span
data-bind
=
"text: itemDetails.title"
></
span
> for eternity?</
p
></
li
>
<
li
><
a
href
=
"#"
class
=
"red"
data-action
=
"confirmDelete"
>Yes, DELETE</
a
></
li
>
<
li
><
a
href
=
"#"
data-action
=
"cancelDelete"
>Nevermind</
a
></
li
>
</
ul
>
</
div
>
You are correct. The mobile widgets in a generic source bound element are not instantiated correctly. I will file this problem for further investigation. A workaround I may suggest is to use the mobile listview widget instead.
I am updating your telerik points for this finding. Please contact us if you need further assistance with this problem.
Petyo
Telerik
Upon closer investigation, the problem turned out to be caused by the template missing a root element. Wrapping the template content is a div resolved it - please see the sample I prepared.
Regards,Petyo
Telerik
I was struggling together with my colleague with same issue, finally we have patched binder.js a little and were going to write your about it. But looks like you are already aware of it. Is this going to be corrected? Currently the best solution is to add root element but...
Best regards,
Alexander
Right now we do not have plans on changing that behavior, as it may introduce unexpected side effects to the MVVM implementation. Having a root element in the template should not be a problem in most cases.
Regards,Petyo
Telerik
My markup ended up as follows:
<
div
id
=
"details"
data-role
=
"view"
data-title
=
"Details"
data-model
=
"viewModel"
>
<
div
class
=
"detailsPanel"
data-bind
=
"source: itemDetails"
data-template
=
"detailsTemplate"
></
div
>
<
script
id
=
"detailsTemplate"
type
=
"text/x-kendo-template"
>
<
div
>
<
h2
data-bind
=
"html: data.title"
></
h2
>
# if (data.photo) { #
<
img
src
=
"#:data.photo#"
title
=
"#:data.title#"
/>
# } #
<
p
data-bind
=
"html: data.description"
></
p
>
<
a
href
=
"\\#asDelete"
data-role
=
"button"
data-rel
=
"actionsheet"
data-actionsheet-context
=
"#:data.id#"
data-icon
=
"custom"
>Delete</
a
>
</
div
>
</
script
>
<
ul
id
=
"asDeleteItem"
data-role
=
"actionsheet"
>
<
li
><
p
>Delete <
span
data-bind
=
"text: itemDetails.title"
></
span
> for eternity?</
p
></
li
>
<
li
><
a
href
=
"#"
class
=
"red"
data-action
=
"confirmDelete"
>Yes, DELETE</
a
></
li
>
<
li
><
a
href
=
"#"
data-action
=
"cancelDelete"
>Nevermind</
a
></
li
>
</
ul
>
</
div
>