using 2 flat data sources and combining for display

[Chris]

Hi

Is there a way that i can use 2 flat data sources to stitch together an editable screen that is fully supported for mvvm.

In my example i have countries and cities, city has a fk column to country.  See fiddle example

Of course in the example it incorrectly lists all cities under each country as there is no filtering

Note :- I understand that this could be as a nested field of cities under country, but my remote data source doesnt support this, instead it gives me 2 flat result sets.

So i want to bind a div to the countries as my driving data, then from within each country template i want to bind another to the subset of cities for that country...

Its probably obvious... Any suggestions welcome

Thanks

Chris

[Alexander Valchev]

Hi Chris,

Thank you for contacting us.

If I understood correctly the problem demonstrated in the jsFiddle is that the cities are not filtered according to their country.
In order to fix this you can bind the child ListView to a calculated field (a method of the ViewModel which finds and returns only the corrected data set).

I believe that the easiest way to explain this is via example:

<!-- at this point now want to show the cities within country -->
Cities
<ul data-bind="source: getCityData" data-role="listview" data-template="city-template"></ul>

The ViewModel:

var viewModel = kendo.observable({
    countryDataSource : countryDS,
    cityDataSource : cityDS,
    getCityData: function(context) {
        cityDS.filter({ field: "country", operator: "eq", value: context.id });
        return cityDS.view();
    }
});

The 'getCityData' is aforementioned calculated function. Its argument, named 'context', is the current dataItem for which the parent ListView template is rendered, e.g. the current country. In the first row the cityDS is filtered by the foreign key value, the second row returns filtered data set - the DataSource's view.

For your convenience I updated the jsFiddle example:

• http://jsfiddle.net/fU7Mg/2/
  
  

I hope this solution will fit in your scenario. Please check it and let me know if you have any further questions.

Regards,
Alexander Valchev
Telerik

[Chris]

Thats great thanks - what i was missing was how to pass the 'current' dataitem to the function.

Thanks

Chris