How to refresh remote datasource when parameters change

2 posts, 0 answers
  1. David
    David avatar
    13 posts
    Member since:
    Apr 2013

    Posted 22 Jan Link to this post

    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.

  2. Ventsislav Georgiev
    Admin
    Ventsislav Georgiev avatar
    17 posts

    Posted 27 Jan Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top