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

Issues rendering controls inside a template

4 Answers 305 Views

Templates

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

Romain asked on 31 Jul 2012, 07:52 PM

Capture-d-cran-du-Simulateur-iOS-31-juil-2012-21-37-16.png

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" />

<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>

<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>

<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!

Issues rendering controls inside a template

4 Answers, 1 is accepted