ListView in MVVM mobile application with pull to refresh event.

[Gilles]

Hi,

I've successfully managed to built an MVVM mobile application getting its data from a REST service and load a listview mobile control. However I don't seem to be able to refresh the data using the "pull to refresh" event.of the listview control.
What I'd like to know is, given the code below, how I can bind to the "pull to refresh" event from a view-model and make a call to the model entity.

Thanks for your help.

Best regards,

Gilles Kern


here is my code:

Main.js:

01.// Variables
02.var SPSite = "https://cerfich.sharepoint.com";
03.
04.// Wait for Icenium to load
05.document.addEventListener("deviceready", onDeviceReady, false);
06.
07.function onDeviceReady() {
08.
09. // Authenticate against SharePoint server
10.    SPOAuth(SPSite);
11.
12.    // Initialize ListView
13.    $("#listview").kendoMobileListView({
14.        pullToRefresh: true
15.    });
16.
17.    // apply the bindings
18.    kendo.bind($("#ListSPItems"), VMListSPItems);
19.}

View-Model:

01.var VMListSPItems = kendo.observable({
02.
03.    // Hold SharePoint list items
04.    GetCustomers: function(e)
05.    {
06.        var Customers = GetAllCustomers(SPSite);
07.        Customers.success(function(data){
08.            // Get Value from SharePoint
09.            var AllCustomers = null;
10.            AllCustomers = data.d.results;
11.
12.            // Update data
13.            VMListSPItems.set("GetCustomers", AllCustomers);
14.        });
15.    },
16.});

View:

01.<div data-role="view" id="ListSPItems" data-title="Customers List" data-layout="mobile-tabstrip">
02.            <div id="CustomersError" />
03.
04.            <ul id="listview" data-bind="source: GetCustomers" data-template="itemTemplate"></ul>
05.
06.            <script id="itemTemplate" type="text/x-kendo-template">
07.                <li><a> ${data.Title} </a></li>
08.            </script>
09.        </div>

Model:

01.function GetAllCustomers(siteurl)
02.{
03.    return $.ajax({
04.        url: siteurl + "/_api/lists/getByTitle('Customers')/items",
05.        type: "GET",
06.        headers: {
07.        "ACCEPT": "application/json;odata=verbose"
08.        },
09.        //success: function (data)
10.        //{
11.        //    //array = data.d.results;
12.        //    Customers = data.d.results;
13.        //},
14.        error: function(xhr, ajaxOptions, thrownError){
15.            //var message = xhr.responseText.find("message").text();
16.            var message = xhr.responseText;
17.            $("#CustomersError").html(message);
18.        }
19.    });
20.}

[Gilles]

Hi,

after hours of banging my head on this problem, I finally found the solution.

I'm posting it here in case someone comes across the same issue.

Solution:
the trick is not to use the "pull to refresh" widget of the listview, but instead these of the view.  Then in the initialization of the view you define the pull function that is going to refresh the listview's source of the view-model.

Let me post my code to make things more clear.

View:

01.<div data-role="view" id="ListSPItems" data-init="ViewInit" data-title="Customers List" data-layout="mobile-tabstrip">
02.            <div id="CustomersError" />
03.            <button id="create" data-bind="click: ClickCustomers" class="k-button">Add</button>
04.
05.            <ul id="listview" data-bind="source: GetCustomers" data-template="itemTemplate"></ul>
06.
07.            <script id="itemTemplate" type="text/x-kendo-template">
08.                <!--<li><a> ${data.Title} </a></li>-->
09.                <li><a class="km-listview-link" data-role="listview-link"> ${data.Title} </a></li>
10.            </script>
11.        </div>

View-Model:

01.var VMListSPItems = kendo.observable({
02.
03.    // Hold SharePoint list items
04.    GetCustomers: function(e)
05.    {
06.        var Customers = GetAllCustomers(SPSite);
07.        Customers.success(function(data){
08.            // Get Value from SharePoint
09.            var AllCustomers = null;
10.            AllCustomers = data.d.results;
11.
12.            // Update data
13.            VMListSPItems.set("GetCustomers", AllCustomers);
14.        });
15.    },
16.
17.    ClickCustomers : function(e)
18.    {
19.        var Customers = GetAllCustomers(SPSite);
20.        Customers.success(function(data){
21.            // Get Value from SharePoint
22.            var AllCustomers = null;
23.            AllCustomers = data.d.results;
24.
25.            // Update data
26.            VMListSPItems.set("GetCustomers", AllCustomers);
27.        });
28.    },
29.});
30.
31.
32.// Initialize the scroller on the view
33.function ViewInit(e)
34.{
35.    var scroller = e.view.scroller;
36.
37.    scroller.setOptions({
38.        pullToRefresh: true,
39.        pull: function(){
40.            var Customers = GetAllCustomers(SPSite);
41.            Customers.success(function(data){
42.                // Get Value from SharePoint
43.                var AllCustomers = null;
44.                AllCustomers = data.d.results;
45.
46.                // Update data
47.                VMListSPItems.set("GetCustomers", AllCustomers);
48.            });
49.
50.            setTimeout(function() { scroller.pullHandled(); }, 400);
51.        }
52.    })
53.}

[Matthias]

thanks a lot for posting a solution for this!!

[David]

Is this seriously the best way to handle this? This seems like a hack compared to defining data-pull-parameters like you'd expect to work... (Which I haven't been able to accomplish yet either.) This is why I was not using declarative initialization with my MVVM because just calling $("#list").kendoMobileListView() seemed to be so much more flexible with what it lets you do.

Sure would be nice to have better documentation on this.

[Alexander Valchev]

Hello guys,

@David, the framework allows setting all configuration of the ListView widget directly in the HTML via data attributes. This help topic explains the convention used to transform JavaScript configuration options into data attributes.

If you would like to use the build-in pull to refresh feature of the ListView widget it is necessary to bind it to a DataSource instance. In this way the ListView will use the build-in DataSource transport to update the data.
In the example that @Gilles posted, the ListView is bound to a local JavaScript array which is why the build-in pull to refresh does not work.

Regards,
Alexander Valchev
Telerik

 

 

[David]

Ahhh.. Ok I was a bit confused by that I guess. I have it working properly now. Thanks.