Issues rendering controls inside a template

5 posts, 0 answers
  1. Romain
    Romain avatar
    4 posts
    Member since:
    Jul 2012

    Posted 31 Jul 2012 Link to this post


    I'm trying to render a Button (HtmlId: btnValidateState2)  and a ButtonGroup in a template.
    But the first one appears like a simple text (and its click event isn't fired) and the second one appears like a simple html list "ul".
    The considered parts of my code:

    <!DOCTYPE html>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta charset="utf-8" />
            <!-- ********** JS ********** -->
            <script src="js/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/jquery.min.js"></script>
            <script src="js/"></script>
            <!-- ********** CSS ********** -->
            <link rel="stylesheet" href="styles/" type="text/css" />
    <div data-role="view" id="stateView" data-init="ViewInit">
        <div id="form" >
                    <header data-role="header">
                        <div data-role="navbar">
                            <span data-role="view-title"></span>
                <ul data-role="listview" data-style="inset" data-type="group" id="stateListView"></ul>
                    <a data-role="button" id="btnValidateState">Validate</a><br/>
    <script type="text/x-kendo-template" id="stateTemplate">
          <!-- not working! :( -->
                    <ul id="select-period" data-index="0">
                    # if (transitionArray != null && transitionArray.length > 1) { #
                        <select id="dropdownChoice">
                            # for (var i=0; i < transitionArray.length; i++) { #
                                <option id="${transitionArray[i].transitionId}" value="${transitionArray[i].transitionExpression}">${transitionArray[i].transitionExpression}</option>
                            # } #
                    # } #
                    <label for="txtComments">Comments</label><br/>
                    <textarea id="txtComments" rows="4" cols="45" name="txtComments" maxlength="200" class="k-textbox"/>
          <!-- not working! :( -->
                    <a data-role="button" id="btnValidateState2">Validate</a>
                function ViewInit() {

    I don't see where I'm wrong.
    My other controls appear like desired, as the button "btnValidateState"...
    And when I place the code of the ButtonGroup up between the end-tag "</header>" and the "ul" tag "stateListView", it appears also great. 

    I've attached a PNG screenshot of my view.

    Thanks a lot for some help!
  2. Romain
    Romain avatar
    4 posts
    Member since:
    Jul 2012

    Posted 01 Aug 2012 Link to this post

    Resolved removing templates from my code and using the good way for controls data binding and view-model
  3. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 06 Nov 2013 Link to this post

    I have the same issue (button not rendering inside a template):
    <script id="templateStory" type="text/x-kendo-template">
        <a data-role="button" data-icon="rewind">back</a>
    Could you give a short example how you managed to solve that?

  4. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 06 Nov 2013 Link to this post

    Ah, got it. I had to do after rendering the template.

    By the way, is this still the suggested way of rendering templates or is there a better way?
    var datasource = new{
        change: function() {
            var template = kendo.template($("#template").html());
            $("#content").html(kendo.render(template, this.view()));
  5. Petyo
    Petyo avatar
    2444 posts

    Posted 06 Nov 2013 Link to this post

    Hi Roman,

    I can confirm your solution - this is the recommended way of rendering and initializing templates. 

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top