Refresh listview datasource using demo ViewModel

[Corey]

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?

[Kiril Nikolov]

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

 

 

[Corey]

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.

[Corey]

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.

[Kiril Nikolov]

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