Cascading DropDownList MVVM Binding Problem

[Mirko]

Hello,

I have a problem when using cascading drop down lists and the MVVM source and value bindings. I created a demo here: http://dojo.telerik.com/EweGO/2

 

Selecting something in the first drop down ("province") causes the displayed value in the second drop down ("location") to update as expected. But even though both province and location are bound to the view model with the value binding only the province will actually be set on the view model as can be seen in the console log. So the location value does not change on the view model but is displayed in the view. It should be either empty or set in both. Is this a bug or am I missing something?

[Mirko]

There was a CORS problem in my original demo. I updated it accordingly and also tried to make the problem clearer by displaying the current view model values. You can find it here: http://dojo.telerik.com/EweGO/3

[Georgi Krustev]

Hello Mirko,

The described issue is a known limitation of the cascading functionality. Basically, the widget will not trigger the "change" event (this is how the model is updated) when it is being filtered by a parent widget. The solution is to either trigger manually change event in dataBound event or use a custom MVVM binding that will do the same. You can find more details in the corresponding Github issue:

• https://github.com/telerik/kendo-ui-core/issues/674

Regards,
Georgi Krustev
Telerik

 

 

[Mirko]

Thank you for your insights. Triggering change in the dataBound event makes the demo work as expected: http://dojo.telerik.com/EweGO/5

 

Side note: the correct GitHub issue appears to be https://github.com/telerik/kendo-ui-core/issues/661

[Mark]

How do you pass the selected ID from the first Dropdown list to the cascaded dropdown list so it can call the web api(service) with the data from the first DDL?  I need to pass the id to fetch the data for the second ddl, then populate a form based on the selected value of the second ddl.  Thanks

[Georgi Krustev]

Hello Mark,

You can use the datasource.transport.read.data callback option to send additional data back to server:

• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data

If you have any difficulties, send us a repro demo showing the issue you have. Thus we will be able to review the case and follow you up with more details.

Regards,
Georgi Krustev
Telerik