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

HTML Select element bound with MVVM not behaving as expected

1 Answer 144 Views

General Discussions

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

Alex Smith asked on 15 Oct 2013, 09:53 PM

kendotestapp.zip

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.

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="msapplication-tap-highlight" content="no" />

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

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

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

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

1 Answer, 1 is accepted

answered on 17 Oct 2013, 03:50 PM

Hello Alex,

Basically the select element and the the DropDownList are completely different.

To the questions:

Source binding requires template and it is different than the source option of the DropDownList. More info about source binding available here.
The options that you are searching are available only for the DropDownList Kendo widget - with data dash attributes you are just specifying the options of the DropDownList , however regular select element does not have such options and it is not initialized at all.
Same as 2) - events are triggered only for the widget
No documentation for regular select element, as I mentioned they are completely different and they do not 'inherit' in one or other way. You can create the items for the select element with the source binding linked in 1).

Kind Regards,
Petur Subev
Telerik

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