I have attached a sample project with a single index.html page (and supporting kendo resources). The source of that page is included below for those that don't want to download the attached .zip.
Now, I have some questions.
1: If I un-comment the Select with the "DataSource Select" label I get an error (Uncaught ReferenceError: id is not defined). Is binding a Select element to a kendo datasource not supported?
2: Neither the "Array Select"s data-option-label, nor the initial option are honored. When the viewModel's selectedPerson attribute is null, there is no way to 'prompt' the user for input. Can the select be configured to either; use a default option to prompt for input OR select the first item in the list?
3: I expected I could implement the behavior in question #2 myself, however the "bound" method is never fired so I don't have an event upon which I can act and evaluate the state of the select. The Select is configured with both the data-bound="onBind" and data-bind="... events{ bound: onBind}" and neither invokes the onBind method.
4: Is there a location where the level of support for controlling an HTML Select is documented? Most of my questions are based on the assumption that since a dropdownlist widget and an HTML Select element derive from the same thing that there would be common behavior.
Environment:
Chrome: 30.0.1599.69
Kendo: 2013.2.918 commercial
Jquery: 1.10.2
Thanks
<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
meta
name
=
"msapplication-tap-highlight"
content
=
"no"
/>
<!-- Kendo UI Mobile CSS -->
<
link
href
=
"styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<!-- jQuery JavaScript -->
<
script
src
=
"http://code.jquery.com/jquery-1.10.2.js"
></
script
>
<!-- Kendo UI Mobile combined JavaScript -->
<
script
src
=
"js/kendo.all.js"
></
script
>
</
head
>
<
body
id
=
"body"
>
<
div
data-role
=
"layout"
data-id
=
"default"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
div
>
</
div
>
<
div
data-role
=
"view"
data-title
=
"Select Test"
data-model
=
"myViewModel"
data-layout
=
"default"
id
=
"roster"
>
<
table
>
<
tr
>
<
td
>Selected Person: <
span
data-bind
=
"text: selectedPerson"
></
span
>
</
tr
>
<
tr
>
<!--<td><label> DataSource Select <select data-value-field="id" data-text-field="name" data-bind="source: dsPeople, value: selectedPerson"></select></label></td>-->
<
td
>
<
label
> Array Select
<
select
data-bound
=
"onBind"
data-option-label
=
"Select an item"
data-value-field
=
"id"
data-text-field
=
"name"
data-bind
=
"source: arrPeople, value: selectedPerson, events: { bound: onBind}"
data-value-primitive
=
"true"
>
<
option
value
=
"-1"
>Select an item</
option
>
</
select
>
</
label
>
</
td
>
</
tr
>
</
table
>
</
div
>
<
script
>
var myViewModel = kendo.observable({
dsPeople: new kendo.data.DataSource({
data: [],
schema: {
model: {
id: "id"
}
}
}),
arrPeople: [],
init: function()
{
for (var i = 0; i <
5
; i++) {
var person = {
name: "Person " + i,
id: i
};
this.dsPeople.add(person);
this.arrPeople.push(person);
}
},
onBind: function(e)
{
alert('onBind called');
},
selectedPerson: null
});
$.ready(myViewModel.init());
// Initialize a new Kendo Mobile Application
var
kidcheck
=
new
kendo.mobile.Application($(document.body), {
skin: "flat"
});
</script>
</
body
>
</
html
>
1: If I un-comment the Select with the "DataSource Select" label I get an error (Uncaught ReferenceError: id is not defined). Is binding a Select element to a kendo datasource not supported?
2: Neither the "Array Select"s data-option-label, nor the initial option are honored. When the viewModel's selectedPerson attribute is null, there is no way to 'prompt' the user for input. Can the select be configured to either; use a default option to prompt for input OR select the first item in the list?
3: I expected I could implement the behavior in question #2 myself, however the "bound" method is never fired so I don't have an event upon which I can act and evaluate the state of the select. The Select is configured with both the data-bound="onBind" and data-bind="... events{ bound: onBind}" and neither invokes the onBind method.
4: Is there a location where the level of support for controlling an HTML Select is documented? Most of my questions are based on the assumption that since a dropdownlist widget and an HTML Select element derive from the same thing that there would be common behavior.
Environment:
Chrome: 30.0.1599.69
Kendo: 2013.2.918 commercial
Jquery: 1.10.2
Thanks