Button in template

15 posts, 0 answers
  1. Brad
    Brad avatar
    9 posts
    Member since:
    Sep 2015

    Posted 03 Nov 2015 Link to this post

    When I have this code in my template code:

     <a data-role="button" class="btn btn-default" data-click="launchPlayer" data-id="#= data.class_id #">Launch Class</a>

     the button doesn't get wired up and clicking doesn't call my function.

    When I move it out of the template it works and calls the function.

     How do I get it to fire the event in my template?

    Below is my template code.

      <script type='text/x-kendo-template' id="classtemplate">
      <h1>#= data.class_id #:  #= data.overview.class_name #</h1>
      <table class="table">
      <tbody>
      <tr>
      <td>Number of Lessons</td>
      <td>#= data.overview.lesson_total #</td>
      </tr>
      <tr>
      <td>Saved Lesson</td>
      <td>#= data.overview.saved_lesson #</td>
      </tr>
      <tr>
      <td>Difficulty</td>
      <td>#= data.overview.difficulty #</td>
      </tr>
      <tr>
      <td>Prerequisites</td>
      <td>#= data.overview.prerequisites #</td>
      </tr>
      </tbody>
      </table>
      <div class="row">
      <div class="col-sm-12">
      <h4>Description</h4>
      <div>#= data.overview.description #</div>
      </div>
      </div>
      <a data-role="button" class="btn btn-default" data-bind="click: launchPlayer" data-id="#= data.class_id #">Launch Class</a>
      </script>

     

     

     ​

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 05 Nov 2015 Link to this post

    Hello Brad,

     

    the problem may be due to the template being part of a widget which is not mvvm-bound. For example, (assuming that this is a ListView), you should use data-bind="source: foo" VS data-source="foo". 

     

    Regards,
    Petyo
    Telerik
     
    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. Brad
    Brad avatar
    9 posts
    Member since:
    Sep 2015

    Posted 05 Nov 2015 in reply to Petyo Link to this post

    It is not a listview. I wasn't sure if data-bind works on other types of templates. It is just a table I am building.I'm somewhat of a newbie, but the documentation is a little hard to understand if you are building your own stuff outside of using the widgets.
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 09 Nov 2015 Link to this post

    Hello Brad,

     

    can you show me the entire implementation (preferably, runnable)? You may use our Dojo for that purpose. 

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Brad
    Brad avatar
    9 posts
    Member since:
    Sep 2015

    Posted 09 Nov 2015 in reply to Petyo Link to this post

    It seems nearly impossible to recreate this in dojo. I have this:

    http://dojo.telerik.com/@bradrice/OsEQe

    Is there any way for you to look at a telerik platform project I have created? You can see it in there.

    I’m having trouble understanding how to bind the model to the template. The only way I have been able to get it to work is to do a jquery ajax call and bind the data to the template in the success callback. It works in the simulator, but when I run it on an ipad using Run it doesn’t work.
  7. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 10 Nov 2015 Link to this post

    Hello Brad,

     

    the approach you have taken won't work - the template contents are inserted in the view after the MVVM binding has traversed the DOM contents of the view. I may suggest that you re-design your approach to use mvvm to hide the parts of your app, and show them once data is retrieved. Upon data retrieval, you may set the response data to a view model field - this will rebind the UI automatically. 

     

    Regards,

    Petyo

    Telerik

     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Brad
    Brad avatar
    9 posts
    Member since:
    Sep 2015

    Posted 10 Nov 2015 in reply to Petyo Link to this post

    Thank you. I have done a ajax request view that model and set the model view to data-model="APP.models.myClassDetail"

     Then I bound the data to the template like this:

      <div class="col-sm-12">
                        <div id="myClass" data-template="classtemplate" data-bind="source: ds">
                        </div>
                        <div id="myLauncher" data-template="launchbutton" data-bind="source: ds">
                        </div>
                    </div>

     

    That seems to work. I didn't know I could bind source directly to the template this way. I don't see any documentation saying you can. However, for whatever reason, I have to have two templates and bind my button as a secondary template. For some reason when I move the button code inside the first template Kendo doesn't widgetize it.

  9. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 12 Nov 2015 Link to this post

    Hello Brad,

     

    I can't be certain on what goes on in this case. May you please update your Dojo with the current implementation? 

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Brad
    Brad avatar
    9 posts
    Member since:
    Sep 2015

    Posted 12 Nov 2015 in reply to Petyo Link to this post

    Thanks for your help:

     I've tried to emulate what I am doing in my project with ajax. However, I can't figure out how to do it using the dojo. Could you tell me what I am doing wrong?

     http://dojo.telerik.com/@bradrice/owafE/2

     Then I can tell you what I am seeing in the templates.

  11. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 16 Nov 2015 Link to this post

    Hello Brad,

     

    the dojo has some javascript parse errors. apart from that, it also utilizes the deviceready event, which is specific for cordova - you should remove that. 

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Brad
    Brad avatar
    9 posts
    Member since:
    Sep 2015

    Posted 16 Nov 2015 in reply to Petyo Link to this post

    Could you please look at it again: http://dojo.telerik.com/@bradrice/owafE/6

     Now I'm getting a 'triggerBeforeShow' error. Not sure what is causing this. I've removed to cordova device ready call.

  13. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 18 Nov 2015 Link to this post

    Hello Brad,

     

    the triggerBeforeShow error occurs because the view is missing its data-role attribute. In addition to that, I notice that you pass an object to the datasource data: property - an array is expected there. 

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14. Brad
    Brad avatar
    9 posts
    Member since:
    Sep 2015

    Posted 18 Nov 2015 in reply to Petyo Link to this post

    OK, thank you. Now I have the dojo document fixed up so it shows you what I was trying to ask in the first place. 

     Notice when I put the button in the detail template, kendo doesn't turn it into a kendo button.

     But when I pull it out into it's own template it becomes a button. See the launch button stacked one on top of the other.

    http://dojo.telerik.com/@bradrice/owafE/6

     

  15. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 18 Nov 2015 Link to this post

    Hello Brad,

     

    you need a single root element in the template - like this.

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  16. Brad
    Brad avatar
    9 posts
    Member since:
    Sep 2015

    Posted 18 Nov 2015 in reply to Petyo Link to this post

    Thank you, that helps a lot.
Back to Top
Kendo UI is VS 2017 Ready