Template Data Refresh with Simple Local Data

[Matt]

Hi,

I have a data-show function which loads up my listview tempate from a simple "data_testing_list" function which builds and returns a local array.

Now when I return to this view after first load, the listview has all nulls, so I "assume" (not sure) I cannot just re-create it using

$("#testing_listview").kendoMobileListView({ ...

for some reason (if so, could someone explain why this is so? as it seems a simple way to reload it?),

Could someone tell me the best practice for setting up this listview (I assume in .ready) and then reloading its data on subsequent shows?

function testing_show() {

$("#testing_listview").kendoMobileListView({

dataSource: kendo.data.DataSource.create({ data: data_testing_list(), group: "letter" }),

template: $("#testing_listview_template").html(),

headerTemplate: "${value}"

});

}

Thanks for your help
Matt

[Alexander Valchev]

Hello Matthew,

I would recommend you to use both events - data-init and data-show. The first one will be triggered only once after the View is initialized, so I suggest to hook up to it and initialize the mobileListView widget using empty dataSource:

function testing_show() {
    $("#listview1").kendoMobileListView({
        dataSource: {
            data: [],
            group: "letter"
        },
        template: "${name}"
    });
}

The data-show on the other hand will fire every time the View becomes visible, so you could use that event to change the data of the dataSource.

function bindData() {
    var listView = $("#listview1").data("kendoMobileListView");
    listView.dataSource.data(data_testing_list());
}

In this way you would be able to reload the listView data on subsequent shows without re-creating the whole widget.
I hope this information will help.

All the best,
Alexander Valchev
the Telerik team

[Matt]

Thank you Alexander, this is exactly what I was looking for :)