DropDownList with Server filtering and paging

[Peter]

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?

[Ivan Danchev]

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

[Peter]

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

[Ivan Danchev]

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

[Peter]

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).

[Peter]

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 ...

[Ivan Danchev]

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