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

    Hello,

    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>
    <html>
        <head>
            <title>Test</title>
            <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/kendo.mobile.min.js"></script>
            <!-- ********** CSS ********** -->
            <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />
        </head>
    <body>
    <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>
                        </div>
                    </header>
                <ul data-role="listview" data-style="inset" data-type="group" id="stateListView"></ul>
                    <a data-role="button" id="btnValidateState">Validate</a><br/>
              </div>
    </div>
     
    <script type="text/x-kendo-template" id="stateTemplate">
                <li><h3>${stateName}</h3></li>
                <li><p>${stateDescription}</p></li>
                <li>
          <!-- not working! :( -->
                    <ul id="select-period" data-index="0">
                        <li>Month</li>
                        <li>Quarter</li>
                        <li>Year</li>
                    </ul>
                </li>
                <li>
                    # if (transitionArray != null && transitionArray.length > 1) { #
                        Response
                        <select id="dropdownChoice">
                            # for (var i=0; i < transitionArray.length; i++) { #
                                <option id="${transitionArray[i].transitionId}" value="${transitionArray[i].transitionExpression}">${transitionArray[i].transitionExpression}</option>
                            # } #
                        </select>
                    # } #
                </li>
                <li>
                    <label for="txtComments">Comments</label><br/>
                    <textarea id="txtComments" rows="4" cols="45" name="txtComments" maxlength="200" class="k-textbox"/>
                </li>
                <li>
          <!-- not working! :( -->
                    <a data-role="button" id="btnValidateState2">Validate</a>
                </li>
    </script>
     
    <script>
                function ViewInit() {
                    $("#select-period").kendoMobileButtonGroup();
                }
    </script>
     
     
    </body>
    </html>

    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. Kendo UI is VS 2017 Ready
  4. 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>
    </script>
    Could you give a short example how you managed to solve that?

    Thanks,
    Roman
  5. Roman
    Roman avatar
    27 posts
    Member since:
    Sep 2013

    Posted 06 Nov 2013 Link to this post

    Ah, got it. I had to do kendo.mobile.init() 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 kendo.data.DataSource({
        ...
        change: function() {
            var template = kendo.template($("#template").html());
            $("#content").html(kendo.render(template, this.view()));
            kendo.mobile.init($("#content"));
        }
    });
  6. Petyo
    Admin
    Petyo avatar
    2438 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. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready