How do I refresh a Kendo UI combo box?

[Andrew]

I have an ASP.Net MVC Kendo UI combobox that is databound to a table with 1000's of records. I've set the MinLength property to 5 so I only return relevant results. The problem is, the user might need to change the text value all together. Is there a way to tell the control to refresh?

Here's the code for the control...

@(Html.Kendo().ComboBoxFor(x => x.Product)
                    .Name("Product")
                    .DataTextField("Name") // Display value
                    .DataValueField("Id") //Return value
                    .MinLength(5)
                    .AutoBind(false)
                    .Suggest(true)
                    .Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Products", "Home").Data("onGetProducts");
                        });
                    })
                )

This is also a post on stackoverflow. 

http://stackoverflow.com/questions/15318992/how-do-i-refresh-a-kendo-ui-combo-box/15319094?noredirect=1#15319094

[Petur Subev]

Hello Andrew,

What do you mean by "change the text value all together" could you please clarify?

Basically to refresh ComboBox you need to refresh its dataSource. 

In your case this could be done like this:

var cb = $('#Products').data('kendoComboBox');
cb.dataSource.read({value:cb.value()})

I hope this helps.

Kind Regards,
Petur Subev
the Telerik team

[Andrew]

> What do you mean by "change the text value all together" could you please clarify?

For example if they enter in "abcde" the control will go ask the datasource for records that have "abcde" in the title. But if a user presses the back space button a few times the enters new text, such as "abcfg" I'd like the control to go back to the datasource and get records that have "abcfg" in them. Does that make sense?

> Basically to refresh ComboBox you need to refresh its dataSource. 

> In your case this could be done like this:

This does help. But how can I call this? I've tried doing this with the change event but that only get's called when the user changes the selected item. I've tried attaching a keyup event to the input but that doesn't get called. The only way I've been able to do it is to add a "refresh" button like in another thread but that doesn't solve my problem.

[Petur Subev]

Hello Andrew,

Isn't this the default behavior of the ComboBox: Check the attached screencast, I think it behaves the way that you described.

http://screencast.com/t/WNPR6Z9S


Regarding the keyup event - it should be triggered , I assume that you are attaching it to the hidden element.

Check the following jsbin:

http://jsbin.com/aviqip/2/edit

I hope this helps.

Kind Regards,
Petur Subev
the Telerik team

[Andrew]

Thanks Peter! This almost solves my problem :o)

I do have one minor issue with your solution. The control will only go to the server once for items. For example, if the user puts in "the" and there are lots of items with "the" in the title I may not want to return them all. Rather, I'd like it to get items with "the" then when the user adds an "m" I'd like it to get items with "them" in it. Does this make sense?

Thanks for all your help. I really appreciate it :o)

[Petur Subev]

Hi,

This should be the default behavior when server filtering is enabled. Even with the sample I shared I experience the same behavior, isn't the the jsbin doing exactly what you described on your side?

Kind Regards,
Petur Subev
the Telerik team

[Andrew]

You're right it is working that way. Thanks again!