Edit this page

Select the First Item on TAB

The following example demonstrates how to select the first item from the popup on a Tab key-press in a Kendo UI MultiSelect widget.

Example
<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>

See Also

For more runnable examples on the Kendo UI MultiSelect, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy