select

Gets or sets the selected item. Selects the item provided as an argument and updates the value and text of the widget.

Important: If the widget is not bound (e.g. autoBind is set to false), the select method will not pre-fetch the data before continuing with the selection and value setting (unlike the value method), and no item will be selected.

Important: When virtualization is enabled, the method does not support selection with a function predicate. The predicate function looks only in the current datasource view, which represents only the active range/page. Hence it will not work properly.

Important: This method does not trigger change event. This could affect MVVM value binding. The model bound to the widget will not be updated. You can overcome this behavior trigerring the change event manually using trigger("change") method.

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  columns: [
    { field: "name" },
    { field: "id" }
  ],
  dataTextField: "name",
  dataValueField: "id",
});

var multicolumncombobox = $("#multicolumncombobox").data("kendoMultiColumnComboBox");
multicolumncombobox.select(0);
multicolumncombobox.trigger("change");
</script>

Parameters

li jQuery | Number | Function

A string, DOM element or jQuery object which represents the item to be selected. A string is treated as a jQuery selector. A number representing the index of the item or function predicate which returns the correct data item.

Returns

Number The index of the selected item, if called with no parameters. If a custom value is entered, the returned selected index is -1.

undefined If called with a parameter as a setter.

Example - select item based on jQuery object

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  columns: [
    { field: "name" },
    { field: "id" }
  ],
  dataTextField: "name",
  dataValueField: "id",
});

var multicolumncombobox = $("#multicolumncombobox").data("kendoMultiColumnComboBox");

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

Example - select item based on index

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  columns: [
    { field: "name" },
    { field: "id" }
  ],
  dataTextField: "name",
  dataValueField: "id",
});

var multicolumncombobox = $("#multicolumncombobox").data("kendoMultiColumnComboBox");

multicolumncombobox.select(1);
</script>

Example - select item based on function predicate

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  columns: [
    { field: "name" },
    { field: "id" }
  ],
  dataTextField: "name",
  dataValueField: "id",
});

var multicolumncombobox = $("#multicolumncombobox").data("kendoMultiColumnComboBox");

multicolumncombobox.select(function(dataItem) {
    return dataItem.name === "Apples";
});
</script>

Example - get selected index of the component

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  columns: [
    { field: "name" },
    { field: "id" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  index: 1
});

var multicolumncombobox = $("#multicolumncombobox").data("kendoMultiColumnComboBox");
var selectedIndex = multicolumncombobox.select();

/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(selectedIndex)
</script>