javascriptkendo-uikendo-combobox

Default select kendo combobox


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?


Solution

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