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

Scrollview in modalview not refreshing content

2 Answers 175 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 09 Jul 2014, 12:33 PM
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 Answers, 1 is accepted

Sort by
0
Mark
Top achievements
Rank 1
answered on 09 Jul 2014, 12:40 PM
Sry here is the jsBin with initial dummy datasource http://jsbin.com/IZaYexac/17/edit
0
Alexander Valchev
Telerik team
answered on 11 Jul 2014, 07:55 AM
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!
 
Tags
ScrollView (Mobile)
Asked by
Mark
Top achievements
Rank 1
Answers by
Mark
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or