How to refresh remote datasource when parameters change

[David]

I am working on a Hybrid using appbuilder. I have a Web 2.0 C# api that is my remote datasource. I have preferences that I store in local storage to keep track of some query parameters that I send to my api in the header.  All that works however the only way it has worked has been with data-refresh="true" which ends up eating up a lot of data when a visit to the page really did not have any parameter changes.  HOWEVER when I set that to "false", it only reads from the server once, even after I have made a change to the query parameter. 

I have refactored my code to try and simplify ... I think I want to call a refresh or read only at the init of the view AND when the settings change (thus needing to send server new query parameters).

Please help.

html

<div id="mylist" data-role="view" data-init="initList" data-show="viewShow" data-layout="main-leads">

    <ul id="remoteListView" data-role="listview" data-template="template" data-endless-scroll="true"></ul>

  </div>

  <script id="template" type="text/x-kendo-template">
    #: data['LastName'] #,  #: data['FirstName'] #
  </script>

 

 js script

'use strict';


var MydataSource = new kendo.data.DataSource(
{
        transport: {
            read: {
                url: function () {
                    var urlnow = app.baseURL() + "MyLeads/";
                    var suffix;
                    var prefs = app.getAuthSettings();
                    if (prefs != null) {
                        suffix = prefs.agentid;
                    } else {
                        // should call the login screen
                        alert("You need to Login.");
                    }
                    return urlnow + suffix;
                },

                // the request type
                type: "get",

                // the data type of the returned result
                dataType: "json",

                beforeSend: function (xhr) {
                    var encodedAuth = app.getBasicAuth();
                    xhr.setRequestHeader('Authorization', encodedAuth);
                    var pageSize = 0;
                    var daysBack = 0;
                    var filter = "";
                    var prefs = app.getSettings();
                    if (prefs != null) {
                        pageSize = prefs.pagesize;
                        daysBack = prefs.daysback;
                        filter = prefs.filter;
                    }
                    xhr.setRequestHeader('Pagesize', pageSize);
                    xhr.setRequestHeader('Daysback', daysBack);
                    xhr.setRequestHeader('Filter', filter);
                }
            }
        },

        schema: {
                model: {
                    fields: {
                        'LastName': {
                            field: 'LastName',
                            defaultValue: ''
                        },
                        'FirstName': {
                            field: 'FirstName',
                            defaultValue: ''
                        },
                        'Address1': {
                            field: 'Address1',
                            defaultValue: ''
                        },
                        'Zip': {
                            field: 'Zip',
                            defaultValue: ''
                        },
                        'WasRead': {
                            field: 'WasRead',
                            defaultValue: 0
                        },
                        'Icon': {
                            field: 'Icon',
                            defaultValue: 'unread'
                        },
                    },
                    icon: function () {
                        var i = 'read';
                        i = this.fields.Icon.toString();
                        return kendo.format('km-icon km-{0}-e', i);
                    }
                }
        },
    serverPaging: false,
    serverSorting: true,
    pageSize: function () {
        return app.getSettings().pagesize;
    }

});

function initList() {
// had tried with var myListView
   //myListView = $("#mylist").kendoMobileListView({
   //     dataSource: MydataSource
   //}).data("kendoMobileListView");

   $("#remoteListView").kendoMobileListView({
       dataSource: MydataSource,
       dataBinding: function (e) {
           console.log(e);
       }
   });

}

function viewShow() {
    //myListView.refresh();
    $("#remoteListView").kendoMobileListView().data().read();
}

This gives an error when viewing that .read() is not a function.  So I think my problem is how I am trying to reference the listview from within the javascript.

 Thanks in advance for your help.

[Ventsislav Georgiev]

Hello David,

The reason for the error you are getting (.read() is not a function) is because the listView object does not contain such a function.
The read()​ method is available on the listView's data source, so you can call it like this:

function viewShow() {
    $("#remoteListView").data("kendoMobileListView").dataSource.read();
}

You have said that previously with data-refresh="true" everything was working correctly. I assume you mean the data-reload attribute, which refreshes the data every time the view is navigated to. So in your code sample you are actually accomplishing the same with the data-show="viewShow" attribute. To achieve the lazy refresh, I would suggest you to make the checks for query parameter changes in the ​viewShow​ method and call the ​read only when they have changed.

Regards,
Ventsislav Georgiev
Telerik