Refresh listview datasource using demo ViewModel

5 posts, 0 answers
  1. Corey
    Corey avatar
    7 posts
    Member since:
    Apr 2013

    Posted 04 Aug 2014 Link to this post

    I'm trying to extend the ViewModel style used in a Kendo UI demo app so that I can reload a listview with different data based on a param value from a selected list item. Here's a ViewModel modelled after the demo:

    (function (global) {
        var TopicViewModel,
            app = global.app = global.app || {};
     
        TopicViewModel = kendo.data.ObservableObject.extend({
            topicDataSource: null,
     
            init: function () {
                var that = this,
                    dataSource;
     
                kendo.data.ObservableObject.fn.init.apply(that, []);
     
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "data/topic.json",
                            dataType: "json"
                        }
                    }
                });
     
                that.set("topicDataSource", dataSource);
            }
        });
     
        app.topicService = {
            viewModel: new TopicViewModel()
        };
    })(window);

    It's attached to a view like this:

    <div data-role="view" id="view-topic" data-layout="mobile-view" data-title="Topics" data-model="app.topicService.viewModel">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>
            <ul id="listview" data-role="listview" data-style="inset"
                data-template="list-item-template"
                data-bind="source:topicDataSource">
            </ul>
        </div>
     
    <script id="list-item-template" type="text/x-kendo-tmpl">
            <a data-bind="click:listItemSelected">${title}</a>
        </script>


    I have a static list view below linking to the list view above.

    <ul data-role="listview" data-style="inset" data-type="group">
     <li>
      <ul>
       <li><a href="#view-topic?action=load-topic&id=1">Topic A</a></li>
       <li><a href="#view-topic?action=load-topic&id=2">Topic B</a></li>
      </ul>
     </li>
    </ul>


    How can I change the datasource before the view renders using the 'id' params from Topic A and Topic B?
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 05 Aug 2014 Link to this post

    Hi Corey,

    You can get the view parameters in the show event of the view, as explained in the following documentation article:

    http://docs.telerik.com/kendo-ui/getting-started/mobile/view#view-parameters

    The if you have all the information loaded in the dataSource, you can use its filter method, so you will filter the information based on the view parameters, here is more information about the filter method:

    http://docs.telerik.com/kendo-ui/api/framework/datasource#methods-filter

    If you do not have the information, then the ListView have setDataSource method that can be used to change its dataSource:

    http://docs.telerik.com/kendo-ui/api/mobile/listview#methods-setDataSource

    Regards,
    Kiril Nikolov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Corey
    Corey avatar
    7 posts
    Member since:
    Apr 2013

    Posted 05 Aug 2014 in reply to Kiril Nikolov Link to this post

    Okay, so if I'm going to use the setDataSource method, how would I setup that ViewModel so that it didn't load any data by default? Since the datasource is bound in the init method it's going to want to load some data before I tell it to load a specific set of data.
  4. Corey
    Corey avatar
    7 posts
    Member since:
    Apr 2013

    Posted 06 Aug 2014 in reply to Kiril Nikolov Link to this post

    Okay, so I tried out your method by placing code in the show event of the ViewModel.

    show: function (e) {
                var that = this,
                    datasource;
     
                kendo.data.ObservableObject.fn.init.apply(that, []);
     
                datasource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: app.baseServiceUrl,
                            dataType: "json",
                            data: { "action": "load-series", "id": e.view.params.id, "maxcount": "20" }
                        }
                    },
                    schema: {
                        data: function (response) {
                            return response.records;
                        }
                    }
                });
                that.model.set("scheduleDataSource", datasource);
            }

    I'm not sure if I'm supposed to be able to use that.set("data", data), cause 'set' is not available, but it works if I use that.model.set();
    the problem I see with this method is that the 'show' event only gets fired once. If I use the back button and select a different category, the same view is shown and the 'show' event doesn't fire again to reload the data.

    Is there a simple solution to this problem? I'm new to the Kendo UI.
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 08 Aug 2014 Link to this post

    Hello Corey,

    The show event should be fired every time you navigate to the view. As for the set() method - it a method of the Kendo UI observable object as explained here:

    http://docs.telerik.com/kendo-ui/api/framework/observableobject#methods-set

    so if you you are using this method for object that is not a Kendo UI Observable then it is normal to get an error. If you want to use the setDataSource method, then you can get a reference of the ListView and just apply the new dataSource like this:

    $('#your-listview-id').getKendoMobileListView().setDataSource(your-new-dataSource);

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top