Kendo UI ComboBox - prevent empty value

Question

I have an input tag like this:

<input id="ddlType" tabindex="4" />

and I am converting this field into a kendo ComboBox widget like this:

$("#ddlType").kendoComboBox({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: "type1", value: "0" },
        { text: "type2", value: "1" }
    ]
});

But I am getting three values in dropdown with first value as blank. I need to remove blank and set type1 option as selected by default.

How do I achieve this?

Klímačka Klímačka · Accepted Answer · 2018-07-05T12:08:49

Just provide the initial value to the HTML element that is being converted to ComboBox like this:

<input id="ddlType" tabindex="4" value="0" />

Alternatively after widget initiation call .select(index) (indexes start at zero) method of the widget to select the first item in dataSource like this:

$("#ddlType").data("kendoComboBox").select(0);

See that in action:

$("#ddlType").kendoComboBox({
  dataTextField: "text",
  dataValueField: "value",
  dataSource: [
    { text: "type1", value: "0" },
    { text: "type2", value: "1" }
  ]
});

<link href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>

<input id="ddlType" tabindex="4" value="0" />

Kendo UI ComboBox - prevent empty value

1 Answers