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

Combobox not selecting first option after filter

3 Answers 399 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Koren
Top achievements
Rank 1
Koren asked on 13 Mar 2017, 10:11 PM

I am having trouble with comboboxes that are in a grid.  The first time I type in a value (e.g. 044), it filters to the 044 items and selects the first one perfectly.  If I then go back to that field and type 043, it filters correctly but as you can see in the attached image, it does not select the first item.  This means that when I hit tab or enter to exit the column, I throw an error because the field is required.  Why is this not working the second time I filter?  I can do this over and over again where it filters once and then not the next time and then it works and then it doesn't.  What am I missing?

Here is the editor I am using.  I have tried both clientside and serverside filtering and loading as you can see.  Nothing helped.  It is a big list but not huge (around 1000 items in the list).

@(Html.Kendo().ComboBoxFor(m => m)
    .Name("TransactionCode_Code") // Name of the widget should be the same as the name of the property
    .DataValueField("Code") // The value of the dropdown 
    .DataTextField("CodeDescription") // The text of the items
    .BindTo((System.Collections.IEnumerable)ViewData["TransactionCodes"]) // A list of all TransactionCodes which is populated in the controller
    //.DataSource(dataSource =>
    //{
    //    dataSource.Read(read =>
    //        {
    //            read.Action("GetTransactionCodesCash", "Utility").Data("filterTransactionCodesCash");
    //        })
    //        .ServerFiltering(true);
    //})    
    .Placeholder("Select one...")
    .HtmlAttributes(new { style = "width:90px" })
    .Height(350)
    .Filter(FilterType.StartsWith)
    //.AutoBind(true)
    .HighlightFirst(true)
    .Suggest(true)
    .Events(e => e.DataBound("transactioncode_dataBound").Change("transactioncode_changed").Filtering("transactioncode_filter"))
    //.Events(e => e.Change("transactioncode_changed"))
    .ClearButton(false)
    .MinLength(3)
)

3 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 15 Mar 2017, 02:29 PM
Hi,

This is the default behavior of the combobox widget, and can be verified in our online demo:
http://demos.telerik.com/kendo-ui/combobox/serverfiltering

The following help article explains how you can modify the combobox so that the highlighted item is selected on tabbing out of the widget:
http://docs.telerik.com/kendo-ui/controls/editors/combobox/how-to/selection/select-on-tab

Regards,
Bozhidar
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Koren
Top achievements
Rank 1
answered on 15 Mar 2017, 03:07 PM
That would work but do you have an example of the same logic using the mvc component?  How do I tie into the combobox input keydown event?
0
Bozhidar
Telerik team
answered on 15 Mar 2017, 03:21 PM
Hello,

You can see how to get a reference to the client widget in the following article:
http://docs.telerik.com/aspnet-mvc/getting-started/fundamentals#client-side-objects

Once you have the client combobox widget instance, the approach is the same.

Regards,
Bozhidar
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ComboBox
Asked by
Koren
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Koren
Top achievements
Rank 1
Share this question
or