Setting DataSource Button Click

[Scott]

Hi,

I'm getting no where with trying to get this to work.

I need to be able to fill a ScrollView widget with images after the click of a button or some other event - not on the load of the page. 

So, my user logs in and upon login verification the widget is shown and filled with the user's images. I can not get the widget to display any images. Right now I am using a local JSON object for data but there will be a remote call to get the JSON object. (I have confirmed the JSON object works if the dataSource and widget is set up and initialized on page load like the DataBinding example for the ScrollView.)

I need to hook up the following dataSource to a Scroll View on a button click and I need to be able to update the data source and the scroll view on another button click:

var _ds = new kendo.data.DataSource({
            data: mzData,
            serverPaging: true,
            pageSize: 36,
            schema: {
                data: "images.image",
                total: "images.count"
            }
        });
_ds.read();

Here's a sample of my JSON:

var mzData = {
    "images": {
        "count": 101,
       " image": [
            {
                "thumbnail": "http://core.windows.net/photos/thumbnails/a7ebe-ed83-464b-8666-08579d0f4/4fa8dce2-5532-49b0-aca7-2bfce063e6c9/26874/357742050405162-1383426800383.jpg",
                "width": 1024,
                "height": 768,
                uri: "http://core.windows.net/photos/a7ebe-ed83-464b-8666-08579d0f4/4fa8dce2-5532-49b0-aca7-2bfce063e6c9/26874/357742050405162-1383426800383.jpg"
            },
            {
               "thumbnail": "http://core.windows.net/photos/thumbnails/a7ebe-ed83-464b-8666-08579d0f4/4fa8dce2-5532-49b0-aca7-2bfce063e6c9/26874/357742050405162-1383426800383.jpg",
                "width": 1024,
                "height": 768,
                uri: "http://core.windows.net/photos/a7ebe-ed83-464b-8666-08579d0f4/4fa8dce2-5532-49b0-aca7-2bfce063e6c9/26874/357742050405162-1383426800383.jpg"
            }
        ]
    }
};

I have tried several different things including:

 var mz1 = $("#mzScrollView").data("kendoMobileScrollView");
        mz1.dataSource.data(_ds);

And
$("#mzScrollView").kendoMobileScrollView({ dataSource: _ds });
and
$("#mzScrollView").kendoMobileScrollView({ dataSource: _ds.data });

Nothing works.

Can you please tell me how to hook up a Scroll View widget to a remote data source and display the data on an event like a button click? Also, I need to know how to update the same widget with other remote data. For example, I will show images in the widget that are public and with the click of another button I will show images that are private.


Thanks.

[Petyo]

Hello Scott,

from what I see, you have opened a support ticket regarding the same topic. This is not necessary in general, since we monitor the premium forums with the same priority as the support requests. For your convenience, I am providing the answer here, too. 

You can use the autoBind configuration of the ScrollView widget. Please take a look at this sample - the scrollview gets populated when the button is clicked.


Regards,
Petyo
Telerik