I use KendoUI ComboBox and I want to put a default select item.
In KendoUI ComboBox I didn't find the way to put the default value in text and not with index.
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id"
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.select(combobox.ul.children().eq(0));
</script>
Here is the example. How can convert it to put text?
As @SatyaRanjanSahoo says you should use value
but you should use the id
value otherwise you will be forcing a value that might not be in the DataSource.
Example, If you do:
var combobox = $("#combobox").data("kendoComboBox");
// Set Value
combobox.value("Apricot");
// Get Value
alert("Value is " + combobox.value());
this will show Apricot
but this is not in the DataSource
meanwhile, if you do:
var combobox = $("#combobox").data("kendoComboBox");
// Set Value
combobox.value(2);
// Get Value
alert("Value is " + combobox.value());
This will show Oranges
that is the correct value for the item which id
is 2
.
So, unless you are sure that the value set in value
call is a valid dataTextField
I would recommend using the dataValueField
.
Check this in the following code snippet...
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id"
});
var combobox = $("#combobox").data("kendoComboBox");
// Set a valid value
combobox.value("Oranges");
alert("Value for Oranges is: " + combobox.value());
// Set an invalid value
combobox.value("Apricots");
alert("Value for Apricots is: " + combobox.value());
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<input id="combobox"/>