This is a migrated thread and some comments may be shown as answers.
ListView in MVVM mobile application with pull to refresh event.
5 Answers 123 Views
This is a migrated thread and some comments may be shown as answers.
Gilles
Top achievements
Rank 1
Gilles asked on 08 Apr 2013, 04:41 PM
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
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.}




5 Answers, 1 is accepted

Sort by
0
Gilles
Top achievements
Rank 1
answered on 09 Apr 2013, 04:46 PM
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.}









0
Matthias
Top achievements
Rank 1
answered on 28 Aug 2014, 03:50 AM
thanks a lot for posting a solution for this!!
0
David
Top achievements
Rank 2
answered on 09 Sep 2014, 08:21 PM
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.
0
Alexander Valchev
Telerik team
answered on 11 Sep 2014, 03:54 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
David
Top achievements
Rank 2
answered on 22 Sep 2014, 08:06 PM
Ahhh.. Ok I was a bit confused by that I guess. I have it working properly now. Thanks.
Asked by
Gilles
Top achievements
Rank 1
Answers by
Gilles
Top achievements
Rank 1
Matthias
Top achievements
Rank 1
David
Top achievements
Rank 2
Alexander Valchev
Telerik team
Share this question
or