Scrollview initialized from script problem

9 posts, 1 answers
  1. Grant
    Grant avatar
    1 posts
    Member since:
    Jun 2011

    Posted 11 May 2012 Link to this post

    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!

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 11 May 2012 Link to this post

    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):

    <!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!
  3. Kendo UI is VS 2017 Ready
  4. Grant
    Grant avatar
    1 posts
    Member since:
    Jun 2011

    Posted 15 May 2012 Link to this post

    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!
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 15 May 2012 Link to this post

    Hello,

    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?

    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Grant
    Grant avatar
    1 posts
    Member since:
    Jun 2011

    Posted 15 May 2012 Link to this post

    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!
  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 15 May 2012 Link to this post

    Hi,

    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. 

    Thanks,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 15 May 2012 Link to this post

    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.
  9. Grant
    Grant avatar
    1 posts
    Member since:
    Jun 2011

    Posted 16 May 2012 Link to this post

    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.

    <!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!
  10. Answer
    Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 16 May 2012 Link to this post

    Hi,

    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);

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready