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