This is a migrated thread and some comments may be shown as answers.

using 2 flat data sources and combining for display

2 Answers 15 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 08 Jan 2014, 11:01 AM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 09 Jan 2014, 05:18 PM
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:
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chris
Top achievements
Rank 1
answered on 09 Jan 2014, 05:24 PM
Thats great thanks - what i was missing was how to pass the 'current' dataitem to the function.

Thanks

Chris
Tags
MVVM
Asked by
Chris
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Chris
Top achievements
Rank 1
Share this question
or