Scrollview in modalview not refreshing content

3 posts, 0 answers
  1. Mark
    Mark avatar
    14 posts
    Member since:
    Jul 2013

    Posted 09 Jul 2014 Link to this post

    Hi,

    we want to implement a image gallery with a scrollview within a modalview.
    We have articles with different images and want to show these images if the user clicks on a link to the image gallery.
    When the user clicks the link we replace the data source from the scrollview with the a new datasource with the new images (with setDataSource) and open the modalview. The pages are set with the help of a template.

    The problem is, that the datasource doesn't get updated properly.
    If we don't set a datasource for the scrollview on the init of the application the scrollview shows the amount of items (pager) but the the pages doesn't contain any data. The template doesn't is not set.
    If we set a dummy data source at the beginning for the scrollview and change the datasource when the user opens the modalview the dummy data is still visible. Furthermore if the new datasource contains more items than the dummy datasource, the new items start after you scroll through the dummy pages.

    This is the link to the dummy project in jsbin if no initial datasource is set: http://jsbin.com/IZaYexac/15/edit
    and this is if a initial dummy datasource is set: http://jsbin.com/IZaYexac/16/edit

    Am I doing anything wrong during setting the datasource?
    Thank you very much

    Here is the Code from JSbin

    <!DOCTYPE html>
    <html>
    <head>
        <title>KendoUI Test Page</title>
         
     
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    <body>
     <div data-role="view">
         <br/>
         <br/>
      <a data-role="button" data-click="openModal">Sign In</a>
    </div>
     
    <div data-role="modalview" id="scrollview-home" style="width: 100%; height: 100%" data-modal="false">
        <div data-role="header">
            <div data-role="navbar">
                <span>Gallery</span>
                <a data-click="closeModalViewLogin" data-role="button" data-align="left">Cancel</a>
            </div>
        </div>
      <div id="scrollview-container">
           <div id="scrollview" style="padding-top: 20%" data-role="scrollview"
               data-template="tmpl"
            data-items-per-page="1">
        </div>
        </div>
    </div>
     
         
                
        <script type="text/x-kendo-template" id="tmpl">
            <div data-role="page"> #=title#</div>
        </script>
        
     
     
    <style>
        
    </style>   
     
    <script>
         
        
         
         function openModal(e) {
            
             var dataSource = new kendo.data.DataSource({
                data: [
                {title:"Item 1", desc:"Description 1"},
                {title:"Item 2", desc:"Description 2"},
                  {title:"Item 3", desc:"Description 3"},
                
            ],
                 pageSize: 7
                });
           
           $("#scrollview").data("kendoMobileScrollView").setDataSource(dataSource);
           $("#scrollview").data("kendoMobileScrollView").refresh();
                 
                $("#scrollview-home").data("kendoMobileModalView").open();
            
     
        var app = new kendo.mobile.Application(document.body, {skin: 'flat'});
         
         
    </script>
    </body>
    </html>

    Best regards
    Mar




  2. Mark
    Mark avatar
    14 posts
    Member since:
    Jul 2013

    Posted 09 Jul 2014 in reply to Mark Link to this post

    Sry here is the jsBin with initial dummy datasource http://jsbin.com/IZaYexac/17/edit
  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 11 Jul 2014 Link to this post

    Hello Mark,

    I updated your sample: http://jsbin.com/IZaYexac/21/edit

    The main change is updated Kendo UI version - instead of Q3 2013 please use Q1 2014 Service pack or newer. Latter versions of the framework contain bug fixes related to not updating pages/pager after dataSource change. I also removed the padding of the ListView component as it causes visual glitches (scrollview element is relatively positioned). In addition it is recommended to change the dataSource after Modal View is opened, not before.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top