I have successfully made a kendoDropDownList that gets filled from my DB, thanks again for your suggestion and help.
However, although it is functional, it doesn't look like a Drop Down Box. To demonstrate, I made a simplified project with just one page and all it has is the kendoDropDownList. The user can click/tap the "Customer:" label and get the drop-down options, but shouldn't there be a separate more obvious-looking control to click/tap next to the label? That is how it is shown in the DropDownList demo you linked to, but of course that demo is not a Mobile application.
Here's what it looks like in my Android 4 emulator:
style/js data:
<!--Kendo UI Mobile styles-->
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<!-- Kendo UI Web styles-->
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<!-- <link href="styles/kendo.dataviz.all.min.css" rel="stylesheet" type="text/css" /> -->
<!-- Kendo UI Web scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.dataviz.min.js" type="text/javascript"></script>
<script src="content/console.js" type="text/javascript"></script>
<!-- minified version of all scripts (Web, DataViz and Mobile). -->
<script src="js/kendo.all.min.js" type="text/javascript"></script>
here's the pertinent HTML:
<div>
<label for="customers">Customer:</label>
<input id="customers"/>
</div>
And here is the javascript that creates the dropdown:
function CreateDropDownList() {
$("#customers").kendoDropDownList({
optionLabel: "Select Customer...",
dataTextField: "CustomerName",
dataValueField: "CustomerID",
dataSource: fakeCustomerDataSource,
change: function () {
var value = this.value();
if (value) {
alert("Select Value:" + value);
}
}
});
}
$(document).ready(function () {
CreateDropDownList();
});
I attached the full project as well in a zip archive.