How do I refresh a Kendo UI combo box?

7 posts, 0 answers
  1. Andrew
    Andrew avatar
    6 posts
    Member since:
    Mar 2013

    Posted 11 Mar 2013 Link to this post

    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
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 13 Mar 2013 Link to this post

    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
    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. Andrew
    Andrew avatar
    6 posts
    Member since:
    Mar 2013

    Posted 13 Mar 2013 Link to this post

    > 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.
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 14 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Andrew
    Andrew avatar
    6 posts
    Member since:
    Mar 2013

    Posted 14 Mar 2013 Link to this post

    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)
  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 18 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Andrew
    Andrew avatar
    6 posts
    Member since:
    Mar 2013

    Posted 21 Mar 2013 Link to this post

    You're right it is working that way. Thanks again!
Back to Top
Kendo UI is VS 2017 Ready