Hi there,
I was using the Scroll View which was working perfectly on the released version kendo ui, but after changing my project to use the latest build ( 2012.1.503) it now seems like the Scroll View is not initialized properly when it is created in javascript.
So when I call:
$("#MenuScrollView").kendoMobileScrollView();
It seems to be initialized partially however it cannot be scrolled horizontally. The page indicators at the bottom are not visible either.
When I resize the page in a normal browser the scroll view starts working perfectly though (Unfortunately on mobile devices I can't do this obviously).
I tried calling $("#MenuScrollView") .resize() and refreshing the scroll view but that doesn't seem to help.
Out of interest I also can't seem to use the content() method from documentation as I get a script error saying it doesn't exist.
Thanks in advance!
I was using the Scroll View which was working perfectly on the released version kendo ui, but after changing my project to use the latest build ( 2012.1.503) it now seems like the Scroll View is not initialized properly when it is created in javascript.
So when I call:
$("#MenuScrollView").kendoMobileScrollView();
It seems to be initialized partially however it cannot be scrolled horizontally. The page indicators at the bottom are not visible either.
When I resize the page in a normal browser the scroll view starts working perfectly though (Unfortunately on mobile devices I can't do this obviously).
I tried calling $("#MenuScrollView") .resize() and refreshing the scroll view but that doesn't seem to help.
Out of interest I also can't seem to use the content() method from documentation as I get a script error saying it doesn't exist.
Thanks in advance!
8 Answers, 1 is accepted
0
Hello,
There are several changes in the scrollview implementation which may lead to such problems. However, I am not sure why this happens in your case. I tried the following sample (using 503 internal build):
And it seems to work fine on my side. The demos also seem to be functioning. What am I missing?
Indeed, the content method seems to be missing in this build. It will be included in the next, though.
Petyo
the Telerik team
There are several changes in the scrollview implementation which may lead to such problems. However, I am not sure why this happens in your case. I tried the following sample (using 503 internal build):
<!DOCTYPE html><html> <head> <title>ScrollView</title> <link rel="stylesheet" href="styles/kendo.mobile.all.min.css"> <script src="js/jquery.min.js"></script> <script src="js/kendo.mobile.min.js"></script> <style> [data-role=page] { display: inline-block; height: 100px; background: #e5e5e5; } </style> </head> <body> <div data-role="view" data-init="initScrollView"> <div id="scrollView"><div data-role="page">Foo</div><div data-role="page">Bar</div><div data-role="page">Baz</div></div> </div> <script> new kendo.mobile.Application(); function initScrollView(e) { e.view.element.find("#scrollView").kendoMobileScrollView(); } </script> </body></html>And it seems to work fine on my side. The demos also seem to be functioning. What am I missing?
Indeed, the content method seems to be missing in this build. It will be included in the next, though.
Regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Grant
Top achievements
Rank 1
Rank 1
answered on 15 May 2012, 09:57 AM
Hi Petyo,
Thanks for the reply.
I tried with your code and it works perfectly.
With your help I have narrowed it down to the fact that I am calling the e.view.element.find("#scrollView").kendoMobileScrollView(); method in the data-show method (And not in the data-init method). I also only call the method in callback of a method I have that populates the scrollview div with data (CallWebApi) as shown below:
CallWebApi('Menu/GetMenuData',"get", function (result, error) {
$("#MenuScrollView").kendoMobileScrollView();
});
My conclusion is that when the kendoMobileScrollView is called in either data-show or in a callback in data-init I experience the behavior I described in my first post. Is there a way I can get around this?
Thanks!
Thanks for the reply.
I tried with your code and it works perfectly.
With your help I have narrowed it down to the fact that I am calling the e.view.element.find("#scrollView").kendoMobileScrollView(); method in the data-show method (And not in the data-init method). I also only call the method in callback of a method I have that populates the scrollview div with data (CallWebApi) as shown below:
CallWebApi('Menu/GetMenuData',"get", function (result, error) {
$("#MenuScrollView").kendoMobileScrollView();
});
My conclusion is that when the kendoMobileScrollView is called in either data-show or in a callback in data-init I experience the behavior I described in my first post. Is there a way I can get around this?
Thanks!
0
Hello,
Petyo
the Telerik team
My example uses the init event handler to initialize the scrollview, and it works. doing it the show event handler is not appropriate, as Kendo UI Mobile widgets do not support re-initialization. Do you execute this code:
CallWebApi('Menu/GetMenuData',"get", function (result, error) {
$("#MenuScrollView").kendoMobileScrollView();
});
in the init event handler?
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Grant
Top achievements
Rank 1
Rank 1
answered on 15 May 2012, 02:38 PM
Hi Petyo,
Yes, I tried placing the code in the data-init handler and that still does not work correctly.
The reason I placed the method in the show handler was because I could not get the "content" method to work (To Update the scrollview with new data every time the view is shown) so I tried re-initializing the scrollview each time. When the content method is eventually released do you think this will sort out my problem?
Thanks!
Yes, I tried placing the code in the data-init handler and that still does not work correctly.
The reason I placed the method in the show handler was because I could not get the "content" method to work (To Update the scrollview with new data every time the view is shown) so I tried re-initializing the scrollview each time. When the content method is eventually released do you think this will sort out my problem?
Thanks!
0
Hi,
Petyo
the Telerik team
We are about to publish a service pack release today, which will contain the content method which was missing in the previous releases. I would like to suggest that you give that a try.
In case it does not work - is it possible for you to open a support ticket with a sample project attached? I think we will be able to fix that easier if we can actually see and reproduce the problem on our side.
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ron
Top achievements
Rank 1
Veteran
Rank 1
Veteran
answered on 15 May 2012, 03:26 PM
I am actually running into the same issue - which is surprising - because it worked for me yesterday - but I did some re-arranging of the content and it stopped.
0
Grant
Top achievements
Rank 1
Rank 1
answered on 16 May 2012, 08:36 AM
Hi Petyo,
Ok, I will create a support ticket with the code however for simplicity here is the code you attached with a change which reproduces the issue I have using setTimeout to simulate the behavior of my CallWebApi Method.
Thanks!
Ok, I will create a support ticket with the code however for simplicity here is the code you attached with a change which reproduces the issue I have using setTimeout to simulate the behavior of my CallWebApi Method.
<!DOCTYPE html><html> <head> <title>ScrollView</title> <link rel="stylesheet" href="styles/kendo.mobile.all.min.css"> <script src="js/jquery.min.js"></script> <script src="js/kendo.mobile.min.js"></script> <style> [data-role=page] { display: inline-block; height: 100px; background: #e5e5e5; } </style> </head> <body> <div data-role="view" data-init="initScrollView"> <div id="scrollView"><div data-role="page">Foo</div><div data-role="page">Bar</div><div data-role="page">Baz</div></div> </div> <script> new kendo.mobile.Application(); function initScrollView(e) { setTimeout(function () { e.view.element.find("#scrollView").kendoMobileScrollView(); }, 100); } </script> </body></html>Thanks!
0
Accepted
Hi,
All the best,
Petyo
the Telerik team
Thanks for the provided code sample. Indeed, in this case the scrollview is missing the view show event handler, which it uses to refresh itself. A workaround I may suggest is the following:
setTimeout(function() { e.view.element.find("#scrollView").kendoMobileScrollView(); $("#scrollView").data("kendoMobileScrollView").viewShow();}, 200);Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!