DropDownList with Server filtering and paging

7 posts, 2 answers
  1. Peter
    Peter avatar
    5 posts
    Member since:
    Mar 2015

    Posted 11 Oct Link to this post

    Hello,

    I have a drop down list used in MVVC SPA app. It is bound to very large (30K+ records) dataset using DataSource object with server paging and filtering enabled.

    Selected item of drop down list is bound to Observable object.

    When user changes value of drop down list, change event fired and user is redirected to:

    router.navigate('/customers?<selected ID>');

    where <selected ID> is selected value.

    Then the route function looks like this:

    router.route("/customers", function(params) {
          viewApp.set('customerId', params.customerId);
          ...

     

    So before I show view, I set customerId property of model which is bound to dropdownlist.

    It's works, but only if selectedId is in "first page" of server results (server paging is enabled).

    How can I solve this?

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1324 posts

    Posted 13 Oct Link to this post

    Hello,

    Could you attach a runnable sample project that demonstrates the described issue? This will give us a better idea of your scenario and will allow us to investigate what causes the unexpected behavior. 

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Peter
    Peter avatar
    5 posts
    Member since:
    Mar 2015

    Posted 13 Oct in reply to Ivan Danchev Link to this post

    Hello,

    sure ... see attached HTML file.

    Also could you please help me: is there better way how to sync application "main" model with model of individual views?

     

    thanks

  4. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1324 posts

    Posted 17 Oct Link to this post

    Hi Peter,

    I created a runnable dojo example that is based on your code but uses our sample service to populate the DropDownList. The DropDownList is virtualized and on scrolling different subsets ("pages") of data are loaded and the id of the selected item is correctly sent to the views.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Peter
    Peter avatar
    5 posts
    Member since:
    Mar 2015

    Posted 17 Oct in reply to Ivan Danchev Link to this post

    Ivan,

    thank you. I'm sorry, but it does not works.

    Try open:

    http://XXX/app.html#/messages?customerId=10249

     

    /messages route handler will fire and sets viewModelApp & viewModelMessages property, but content of dropdown list will stay "clear" (selected value which belongs to 10249 will not be shown in drop down list).

  6. Peter
    Peter avatar
    5 posts
    Member since:
    Mar 2015

    Posted 17 Oct in reply to Peter Link to this post

    Ivan, just one note: there is a race condition in your code. ValueMapper handler is sometimes called once, sometimes twice. First call is with empty value even before route handler is called. Second time it is called with correct customer ID from model.

    Not sure what is wrong :(

    Just try reload example several times, sometimes drop down list shows customer name, sometimes not ...

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1324 posts

    Posted 19 Oct Link to this post

    Hello Peter,

    Here's the same example, but modified to show a selected item initially (id 10250): dojo. Going to "messages" and entering a different id, for example 10249 and pressing Enter selects the item with that id in the DropDownList.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top