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
Best regards
Mar
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> <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.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
0
Mark
Top achievements
Rank 1
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
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
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!