ListView in MVVM mobile application with pull to refresh event.

6 posts, 0 answers
  1. Gilles
    Gilles avatar
    5 posts
    Member since:
    Mar 2013

    Posted 08 Apr 2013 Link to this post

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




  2. Gilles
    Gilles avatar
    5 posts
    Member since:
    Mar 2013

    Posted 09 Apr 2013 Link to this post

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









  3. Kendo UI is VS 2017 Ready
  4. Matthias
    Matthias avatar
    1 posts
    Member since:
    Jul 2014

    Posted 27 Aug 2014 in reply to Gilles Link to this post

    thanks a lot for posting a solution for this!!
  5. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 09 Sep 2014 Link to this post

    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.
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 11 Sep 2014 Link to this post

    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!
     
  7. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 22 Sep 2014 in reply to Alexander Valchev Link to this post

    Ahhh.. Ok I was a bit confused by that I guess. I have it working properly now. Thanks.
Back to Top
Kendo UI is VS 2017 Ready