Kendo UI Mobile Refresh List View on View Show

Question

I'm working on a Kendo UI Mobile app (using only iOS at the time) and currently have 3 views in the app. The "main" view has a ListView, and the other 2 views are simple forms.

The list view is bound to data that I have in Local Storage and have a method for getting the data. It all seems to be working fine when the app loads, and I can also do a "pull to refresh" and the data will update.

What I can't figure out is how to refresh the list when the view is essentially re-shown. A user can go to one of the other views and do some sort of action which will update the data so when they go back to the list view, I would like the data to be automatically refreshed.

Hopefully this makes sense? I've included my appInit method below which is what's binding the data initially:

function appInit() {
        $("#certificateList").kendoMobileListView({
            pullToRefresh: true,
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: function(options) {
                        var data = Redemptions.getCertificates();
                        options.success(data);
                    },
                    schema: {
                        model: {
                            id: 'id',
                            fields: {
                                id: { type: 'number' },
                                value: { type: 'number', format: '{c2}' }
                            }
                        }
                    }
                }
            }),
            //dataSource: kendo.data.DataSource.create({data: Redemptions.getCertificates() }),
            template: $("#certificateTemplate").html()
        });
    }

Things I've tried

• Using a method attached to the data-after-show on the main view
• Calling $('#certificateList').data('kendoMobileListView').refresh(); after my "add" code completes and navigates back to the main view.

Answer 1

Turns out I also needed to add a read() on the DataSource for the ListView. My resulting code is:

function refreshCertificates() {
    var certificateList = $('#certificateList').data('kendoMobileListView');
    certificateList.dataSource.read();   // added line
    certificateList.refresh();
}

It would be called from something such as:

if (cert.Status === 1) { // valid
    app.navigate('#certificatesView', 'slide:right');
    refreshCertificates();
}

I chose to not have it be in the data-after-show attribute because there are times when I perform an action when the view doesn't actually get refreshed.