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>
    $("#bobox").kendoComboBox({
        dataSource: [
            { id: 1, name: "Apples" },
            { id: 2, name: "Oranges" }
        ],
        dataTextField: "name",
        dataValueField: "id"
    });

    var bobox = $("#bobox").data("kendoComboBox");

    bobox.select(bobox.ul.children().eq(0));
</script>

Here is the example. How can convert it to put text?

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>
    $("#bobox").kendoComboBox({
        dataSource: [
            { id: 1, name: "Apples" },
            { id: 2, name: "Oranges" }
        ],
        dataTextField: "name",
        dataValueField: "id"
    });

    var bobox = $("#bobox").data("kendoComboBox");

    bobox.select(bobox.ul.children().eq(0));
</script>

Here is the example. How can convert it to put text?

• javascript
• kendo-ui
• kendo-bobox

2 Answers 2

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 bobox = $("#bobox").data("kendoComboBox");
// Set Value
bobox.value("Apricot");
// Get Value
alert("Value is " + bobox.value());

this will show Apricot but this is not in the DataSource meanwhile, if you do:

var bobox = $("#bobox").data("kendoComboBox");
// Set Value
bobox.value(2);
// Get Value
alert("Value is " + bobox.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 remend using the dataValueField.

Check this in the following code snippet...

$("#bobox").kendoComboBox({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id"
});

var bobox = $("#bobox").data("kendoComboBox");


// Set a valid value
bobox.value("Oranges");
alert("Value for Oranges is: " + bobox.value());

// Set an invalid value
bobox.value("Apricots");
alert("Value for Apricots is: " + bobox.value());

<link href="http://cdn.kendostatic./2014.2.1008/styles/kendo.mon.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic./2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic./2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic./2014.2.1008/js/kendo.all.min.js"></script>

<input id="bobox"/>

To put text directly into bo-box:

 var bobox = $("#bobox").data("kendoComboBox");
 bobox.value("Oranges");

But, using the same approach anonymous text can be set into the bo-box which is not a part of the data-source. i.e.

  bobox.value("XYZ");

So, its good to use index to set value to bo-box.