All Components

Keyboard Navigation

The keyboard support of the MultiColumnComboBox is always available.

To apply the keyboard shortcuts, focus the MultiColumnComboBox by clicking the example area and pressing the Tab key.

The MultiColumnComboBox, its input, and popup elements support the following keyboard shortcuts:

SHORTCUT DESCRIPTION
 Up Arrow  Highlights the previous item.
 Down Arrow  Highlights the next item.
 Home  Highlights the first item.
 End  Highlights the last item.
 Page Up  Scrolls the popup up.
 Page Down  Scrolls the popup down.
 Enter  Selects the highlighted item.
 Esc 
  • Closes the popup.
  • Clears the value if the popup is not opened.
 Alt+Down Arrow  Opens the popup.
 Alt+Up Arrow  Closes the popup.
<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
    </kendo-datasource>
    <kendo-multicolumncombobox :data-source-ref="'datasource'"
                               :data-text-field="'ProductName'"
                               :data-value-field="'ProductID'"
                               :placeholder="'Select product'"
                               style="width:300px">
        <kendo-multicolumncombobox-column :field="'ProductID'"
                                          :title="'ID'"
                                          :width="70">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'ProductName'"
                                          :title="'Product Name'"
                                          :width="200">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'QuantityPerUnit'"
                                          :title="'Quantity per Unit'"
                                          :width="150">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'UnitPrice'"
                                          :title="'Unit Price'"
                                          :format="'{0:c}'"
                                          :width="100">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'UnitsInStock'"
                                          :title="'Units in Stock'"
                                          :width="120">
        </kendo-multicolumncombobox-column>
    </kendo-multicolumncombobox>
</div>
Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp"
})
In this article