CODEWITHSUNDEEP
kendo-uikendo-mobile
Matt Millican
Matt Millican

Reputation: 4054

Kendo UI Mobile Refresh List View on View Show

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

Upvotes: 1

Views: 6786

Answers (2)

Matt Millican
Matt Millican

Reputation: 4054

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.

Upvotes: 4

Robin Giltner
Robin Giltner

Reputation: 3055

Kendo mobile views have an event, beforeShow. You should be able to add an eventhandler for this, and do whatever you need to before the view is shown.

<div id="mainView" data-role="view" data-title="Main Page" data-before-show="mainViewLoad" data-layout="default">

function mainViewLoad() { 
    alert("Main View loaded"); 
}

See jsbin http://jsbin.com/OBeZeZu/1/edit

Kendo View Events list here http://docs.kendoui.com/api/mobile/view#events

Upvotes: 1

Related Questions