ListView in MVVM mobile application with pull to refresh event. in Kendo UI for jQuery

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 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

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.}

5 Answers, 1 is accepted

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. 

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.}

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!