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
Thanks,
Blake
4 Answers, 1 is accepted
0
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:
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
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));
}
}
Regards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Blake
Top achievements
Rank 1
answered on 22 Jul 2014, 03:51 PM
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.
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.
0
Accepted
Hello Blake,
You can get the currently highlighted item using the current method:
Method will return a jQuery instance of the current focused/highlighted item.
Regards,
Georgi Krustev
Telerik
You can get the currently highlighted item using the current method:
var
item = [multiselect].current();
Regards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Blake
Top achievements
Rank 1
answered on 23 Jul 2014, 06:54 PM
Perfect! Thanks!