using 2 flat data sources and combining for display

3 posts, 1 answers
  1. Chris
    Chris avatar
    21 posts
    Member since:
    Jul 2004

    Posted 08 Jan 2014 Link to this post

    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. Answer
    Chris
    Chris avatar
    21 posts
    Member since:
    Jul 2004

    Posted 09 Jan 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Chris
    Chris avatar
    21 posts
    Member since:
    Jul 2004

    Posted 09 Jan 2014 Link to this post

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

    Thanks

    Chris
Back to Top