Added widgets in templates are not 'executed'

Thread is closed for posting
13 posts, 1 answers
  1. Christian
    Christian avatar
    24 posts
    Member since:
    Sep 2008

    Posted 05 Jun 2012 Link to this post

    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.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 06 Jun 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Christian
    Christian avatar
    24 posts
    Member since:
    Sep 2008

    Posted 06 Jun 2012 Link to this post

    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!
  5. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 07 Jun 2012 Link to this post

    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!
  6. Christian
    Christian avatar
    24 posts
    Member since:
    Sep 2008

    Posted 07 Jun 2012 Link to this post

    Hi Petyo,

    thanks, that was it - both suggestions :)

    Cheers.
  7. Gurumurthy
    Gurumurthy avatar
    9 posts
    Member since:
    Dec 2012

    Posted 04 Feb 2013 Link to this post

    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.
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 07 Feb 2013 Link to this post

    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!
  9. Brandon Peterson
    Brandon Peterson avatar
    47 posts
    Member since:
    May 2007

    Posted 18 Jun 2013 Link to this post

    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>
  10. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 24 Jun 2013 Link to this post

    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!
  11. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Jul 2013 Link to this post

    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!
  12. Alexander
    Alexander avatar
    4 posts
    Member since:
    Aug 2012

    Posted 05 Jul 2013 Link to this post

    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
  13. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 05 Jul 2013 Link to this post

    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!
  14. Brandon Peterson
    Brandon Peterson avatar
    47 posts
    Member since:
    May 2007

    Posted 05 Jul 2013 Link to this post

    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>

Back to Top
Kendo UI is VS 2017 Ready