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

Added widgets in templates are not 'executed'

12 Answers 354 Views
Templates
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Christian
Top achievements
Rank 1
Iron
Christian asked on 05 Jun 2012, 08:31 PM
I have a template like this:
<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

Sort by
0
Iliana Dyankova
Telerik team
answered on 06 Jun 2012, 04:39 PM
Hello Christian,

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 Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Christian
Top achievements
Rank 1
Iron
answered on 06 Jun 2012, 05:11 PM
Hehehe - it may very well be the case that is is not implemented the way it should be :)

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!
0
Accepted
Petyo
Telerik team
answered on 07 Jun 2012, 07:30 AM
Hi Christian,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Christian
Top achievements
Rank 1
Iron
answered on 07 Jun 2012, 08:40 AM
Hi Petyo,

thanks, that was it - both suggestions :)

Cheers.
0
Gurumurthy
Top achievements
Rank 1
answered on 04 Feb 2013, 10:38 PM
Hello - I have a follow-up question that is not directly related to the original question. In my app, I have a footer section that is shared by all views, as they usually do. :

<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. 
Thanks, Any help would be greatly appreciated.
0
Alexander Valchev
Telerik team
answered on 07 Feb 2013, 07:52 AM
Hi Gurumurthy,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brandon Peterson
Top achievements
Rank 2
answered on 19 Jun 2013, 02:33 AM
Widgets in an MVVM-bound template are not initialized since kendo.mobile.init is not called manually. How can this be done?
<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>
0
Petyo
Telerik team
answered on 24 Jun 2013, 05:30 AM
Hi Brandon,

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.

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Petyo
Telerik team
answered on 02 Jul 2013, 10:47 AM
Hello Brandon,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alexander
Top achievements
Rank 1
answered on 05 Jul 2013, 09:33 AM
Hello Petyo,

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
0
Petyo
Telerik team
answered on 05 Jul 2013, 11:20 AM
Hello 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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brandon Peterson
Top achievements
Rank 2
answered on 05 Jul 2013, 10:48 PM
The root element did do the trick for me. Thanks for the resolution.

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>

Tags
Templates
Asked by
Christian
Top achievements
Rank 1
Iron
Answers by
Iliana Dyankova
Telerik team
Christian
Top achievements
Rank 1
Iron
Petyo
Telerik team
Gurumurthy
Top achievements
Rank 1
Alexander Valchev
Telerik team
Brandon Peterson
Top achievements
Rank 2
Alexander
Top achievements
Rank 1
Share this question
or