MVVM for master-detail layout

[Dan]

So far we're really enjoying kendoui+mvvm and are planning to use it on a large application. As part of our prototyping, I'm trying to set up a fairly basic page with a drop-down and a grid that is dependent on the drop-down selection.

I've put an example on jsfiddle here:

http://jsfiddle.net/njCxe/

Could someone please help me understand:

1. Why does the grid start out empty, even though Source A is selected by default?
2. Why, when I click Edit, does nothing happen when I click Update?

Thanks for your help!

[Alexander Valchev]

Hi Dan,

Thank you for contacting us. Up to your questions:

1. Because the DropDown does not trigger its change event initially (when first item is auto-selected). As a result the currentDataSource remains empty (null). The solution is to trigger manually the change event:
   

   $(document).ready(function () {
       kendo.bind("#datasources-container", myViewModel);
       $("[data-role=dropdownlist]").data("kendoDropDownList").trigger("change");
   });

   
   
   
2. Because the edited dataItem does not have an ID. Model ID is essential for the editing functionality and should not be omitted.
   The DataSource does not support nested data structures like the one you use, so it is not possible to define the model of the dataFields. My recommendation is to use two separate DataSources - one for the DropDown and another for the Grid. On change of the DropDown you can filter Grid's dataSource. In this way the user will see only those records which match the selected ID from the dropdown. (I noticed that there is a field DataSourceId which you could use for filtering)

I hope this information will help. Please let me know if you have any additional questions.
Thank you in advance.

Regards,
Alexander Valchev
Telerik

[Dan]

Okay, thanks for the help Alexander!