Select the First MultiSelect Item on TAB
Environment
| Product | Progress® Kendo UI® MultiSelect for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I select the first item from the popup on a Tab key-press in a Kendo UI MultiSelect widget?
Solution
The following example demonstrates how to achieve the desired scenario.
<div id="example">
<div class="demo-section k-header">
<h4>Select Continents</h4>
<select id="select"></select>
</div>
<script>
$(document).ready(function() {
function onDataBound() {
$(".console").append("<p>event: dataBound</p>");
}
function onOpen() {
$(".console").append("<p>event: open</p>");
}
function onClose() {
$(".console").append("<p>event: close</p>");
}
function onChange() {
$(".console").append("<p>event: change</p>");
}
function onSelect(e) {
var dataItem = this.dataSource.view()[e.item.index()];
$(".console").append("<p>event :: select (" + dataItem.text + " : " + dataItem.value + ")</p>");
};
function onFiltering(e) {
$(".console").append("<p>event :: filtering</p>");
}
var data = [
{ text: "A", value:"1" },
{ text: "Europe", value:"2" },
{ text: "Asia", value:"3" },
{ text: "North America", value:"4" },
{ text: "South America", value:"5" },
{ text: "Antarctica", value:"6" },
{ text: "Australia", value:"7" }
];
var ms = $("#select").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
dataBound: onDataBound,
filtering: onFiltering,
select: onSelect,
change: onChange,
close: onClose,
open: onOpen
}).data("kendoMultiSelect");
var selectItem = function(ms) {
var dataItem = ms.dataSource.view()[0];
var value = ms.value();
if (dataItem) {
value.push(dataItem.value);
ms.value(value);
}
}
ms.input
.on("blur", function() {
selectItem(ms);
})
.on("keydown", function(e) {
if (e.keyCode === 9) {
selectItem(ms);
}
});
});
</script>
<div class="box">
<h4>Console log</h4>
<div class="console"></div>
</div>
<style>
.demo-section {
width: 400px;
}
</style>
</div>