This is a migrated thread and some comments may be shown as answers.

[Solved] Automatically select first matching item

1 Answer 119 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Martin
Top achievements
Rank 1
Martin asked on 09 Aug 2012, 12:16 PM
I have a problem with a filterable ComboBox:

When the user starts typing some text, then the ComboBox correctly displays only items containing the entered text.
If the user now selects (either by clicking or by using the down-arrow key) an item, then everything works as expected.

But if the user types some text, then leaves the ComboBox (e.g. by pressing the tab-key), no item is selected.
Is there a way to detect that situation (client-side) and automatically select the first matching item (if there are matching items) or restore the previous selection?

BTW this is how the combobox is created in the View:

<%= Html.Telerik().ComboBox()
                .Name("ComboBox")
                .BindTo(Model.Jobs)
                .SelectedIndex(Model.Jobs.FindIndex(j=>j.Selected))
                .AutoFill(true)
                .OpenOnFocus(true)
                .Filterable(filtering => filtering.FilterMode(AutoCompleteFilterMode.Contains))
                .HighlightFirstMatch(true)
%>

Thanks,
Martin

1 Answer, 1 is accepted

Sort by
0
Martin
Top achievements
Rank 1
answered on 09 Aug 2012, 12:48 PM
I think I made some progress, but have now another problem:

I added a client-side handler for the OnChanged event. If the user did not correctly select an item, I am able to find the first match, using the combobox.filteredDataIndexes array:

<%= Html.Telerik().ComboBox()
        .ClientEvents(e=>e.OnChange("OnChanged"))
        // other methods omitted ...
%>
function OnChanged(e) {
        var combobox = $(this).data("tComboBox");
 
        var item = null;
        if (combobox.selectedIndex < 0 && combobox.filteredDataIndexes.length > 0) {
            // the user did not select an item -> select the first matching item
            item = combobox.data[combobox.filteredDataIndexes[0]];
            console.log('selecting item at index ' + combobox.filteredDataIndexes[0]);
 
            // this results in an error:
            combobox.select(combobox.filteredDataIndexes[0]);
        }
         
        return;
}

The problem is, that when I call combobox.select(combobox.filteredDataIndexes[0]); this gives an erro rin the javascript console:

Uncaught TypeError: Cannot read property 'Text' of undefined  

Any ideas?
Tags
ComboBox
Asked by
Martin
Top achievements
Rank 1
Answers by
Martin
Top achievements
Rank 1
Share this question
or