TAB key support?

5 posts, 1 answers
  1. Blake
    Blake avatar
    14 posts
    Member since:
    Jun 2010

    Posted 18 Jul 2014 Link to this post

    Is it possible to support the TAB key when an item is partially selected so that it will resolve to the highlighted item?  For example if my MultiSelect contains an item "Apple" and I start typing "App", I would like to be able to hit TAB and have it resolve to the highlighted item which would be "Apple" in this case.

    Thanks,
    Blake
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 21 Jul 2014 Link to this post

    Hello Blake,
     
    Generally speaking, you can wire the keydown event of the multiselect input element. Thus when TAB key is pressed you can get the input value and try to select the most appropriate item. One possible way to find an item to select is to get the data items and loop them until the correct data item is found. Then add its value to the current multiselect value using value method:
    function onInputKeyDown(e) {
        var value = this.value;
        var dataitems = [multiselect].dataSource.view();
        var result = [];
     
        if (e.keyCode === 9) {
            for (var idx = 0, length = dataitems.length; idx < length; idx++) {
                if (dataItems[idx].[dataTextField].indexOf(value) !== -1) {
                   result.push(dataItems[idx].[dataValueField]);
                }
            }
     
            [multiselect].value([multiselect].value().concat(result));
        }
    }
    Please note that the provided code excerpt is not tested, but shows a conceptual way to accomplish your specific business requirement.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Blake
    Blake avatar
    14 posts
    Member since:
    Jun 2010

    Posted 22 Jul 2014 in reply to Georgi Krustev Link to this post

    Georgi,

    Thanks, this is helpful but the one key piece is knowing which item is highlighted.  For example, if I have two entries "Apple" and "Apple Pie" and I type "App" and then I manually highlight "Apple Pie" and hit TAB, I would like for "Apple Pie" to be selected.  With your code sample, it would just select "Apple" since it is the first one in the list.

    Is there any way to programmatically tell which item is highlighted?  Essentially I just want TAB to work like Enter does out-of-the-box.
  5. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 23 Jul 2014 Link to this post

    Hello Blake,

    You can get the currently highlighted item using the current method:
    var item = [multiselect].current();
    Method will return a jQuery instance of the current focused/highlighted item.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Blake
    Blake avatar
    14 posts
    Member since:
    Jun 2010

    Posted 23 Jul 2014 in reply to Georgi Krustev Link to this post

    Perfect! Thanks!
Back to Top
Kendo UI is VS 2017 Ready