dynamically assign a datasource to a scrollview at runtime

1 posts, 0 answers
  1. Jon
    Jon avatar
    24 posts
    Member since:
    Apr 2009

    Posted 02 Aug 2013 Link to this post

    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.
Back to Top