This is a migrated thread and some comments may be shown as answers.

dynamically assign a datasource to a scrollview at runtime

0 Answers 172 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 2
Veteran
Jon asked on 02 Aug 2013, 08:42 AM
Just building a mobile web site and have various content pages that have gallery content on so will use a scroll view to display the data.

Not all pages will have a gallery and each gallery is different.

I dont want to have to create x number of datasources for each gallery and then have x number of views with the different scrollview and content in.

I want to create one datasource and assign the datasource to the scrollview at runtime called from a web service with different parameters based on what content page is being called.

So here's my view code:
<div data-role="view" data-layout="mobile-tabstrip" id="tabstrip-contentr" data-show="initcontent">
    <div class="content">
        <div id="cntpagehtml"></div>
        <div data-role="scrollview" data-autobind="false" id="my-scrollview"
        data-template="scrollview-binding-template"  data-enable-pager="true">
        </div>
        <script id="scrollview-binding-template" type="text/x-kendo-template">
             <div style="width:300px;">
            <div>
                <img src="/webimages/gallery/#: Image #" class="slider" /></div>               
                <div class="title">#= Caption #</div>
            </div>
        </script>
    </div>
</div>
I have set autobind to false and not given it a data source so it doesn't bind

Heres my call to get the data passing in the section 
function GetGallery(sectionid) {
    var _GalleryDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: "mobiledata.asmx/GetGallery",
                dataType: "json",
                type: "POST",
                data: { SectionID: sectionid },
                contentType: "application/json; charset=utf-8"
            },
            parameterMap: function (data, operation) {
                data = $.extend({}, data);
                return JSON.stringify(data);
            }
        },
        serverPaging: true,
        pageSize: 30,
        schema: {
            data: "d[0].Items", total: "d[0].TotalItems"
        },
        change: function () {
            $("#my-scrollview").data('kendoMobileScrollView').refresh();
        }
    });
}
I now need to somehow assign the returned datasource in my data-show event code:
function initcontent(e) {
     
    var scroller = e.view.scroller;
    scroller.reset();
    GetContent("#cntpagehtml", e.view.params.p);
 
    var Section = 0;
    switch(e.view.params.p)
    {
        case "meet-the-team":
            GetGallery(3);
            //Assign the _GalleryDS to my scrollview......
            break;
        case "design-consultancy":
            GetGallery(6);
            //Assign the _GalleryDS to my scrollview......
            break;
        case "point-of-sale":
            GetGallery(4);
            //Assign the _GalleryDS to my scrollview......
             
            break;
        default:
    }
   
};

Anyone help, is it possible? or should i be doing it a different way?

Thanks

Jon.

No answers yet. Maybe you can help?

Tags
ScrollView (Mobile)
Asked by
Jon
Top achievements
Rank 2
Veteran
Share this question
or