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

Refresh listview datasource using demo ViewModel

4 Answers 170 Views
Sample Applications
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Corey
Top achievements
Rank 1
Corey asked on 05 Aug 2014, 03:57 AM
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?

4 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 05 Aug 2014, 10:31 AM
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.

 
0
Corey
Top achievements
Rank 1
answered on 06 Aug 2014, 02:00 AM
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.
0
Corey
Top achievements
Rank 1
answered on 07 Aug 2014, 01:17 AM
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.
0
Kiril Nikolov
Telerik team
answered on 08 Aug 2014, 12:11 PM
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!
 
Tags
Sample Applications
Asked by
Corey
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Corey
Top achievements
Rank 1
Share this question
or