More actions for each scroll?

11 posts, 0 answers
  1. Afxe
    Afxe avatar
    10 posts
    Member since:
    Jun 2012

    Posted 22 Jun 2012 Link to this post

    Heya,

    I have a problem with the

     

    scrollview widget. In this demo I want to change the options ( Photo Album,Cities, Sunset) each time I change the photo in the scrollview. For example, for each photo(city) I want to provide a small description about the city below the separation line. Does anyone have any suggestion?

    -Afxe
  2. Afxe
    Afxe avatar
    10 posts
    Member since:
    Jun 2012

    Posted 23 Jun 2012 Link to this post

    I found the solution. I read the page for each scroll and I present something else for each page. So the basic code is below.

    HTML:

    <div data-role="view" data-layout="overview-layout" id="overview-gallery" data-title="Gallery"  data-init="initScrollView">
        <div data-role="scrollview" id="scrollviewContainer" data-page="1">
            <div data-role="page" class="photo photo2"></div>
            <div  data-role="page" class="photo photo2"></div>
            <div data-role="page" class="photo photo3"></div>
                    ........
        </div>
        <div>
                  <!-- Whatever u want to be displayed below the scroller -->
    </div>

    JS:

    <script>
            window.kendoMobileApplication = new kendo.mobile.Application(document.body);
            function initScrollView(){
                $("#scrollviewContainer").kendoMobileScrollView({
                change : onChange
                });
            }
            function onChange(args){
            console.log(args.page);
                if (args.page==0){
                    <!-- Do something -->
                }
                else if (args.page==1){
                    <!-- Do something else-->
                }
                else if (..)
                 .....
            }
    </script>

    Of course I can change dynamically the content of the html according to the page number which is a better solution than the if statements.
  3. Kendo UI is VS 2017 Ready
  4. Elias
    Elias avatar
    4 posts
    Member since:
    Jun 2012

    Posted 24 Jun 2012 Link to this post

    I'm running into trouble with your code example. The docs tells me there are two ways to initialize the srollview, with the script or the data-role. You're using both in your example. I'm likely missing something. Thanks for pointing me in the right direction however.

    Elias
  5. Afxe
    Afxe avatar
    10 posts
    Member since:
    Jun 2012

    Posted 24 Jun 2012 Link to this post

    You may be right, I tried it without the data-role="scrollview" and it works fine. Actually both version(with and without it) work like a charm.
    Ι have just started playing with KendoUi 3 days ago so I am still noob on it, so maybe a member of the stuff can clarify it.
  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 25 Jun 2012 Link to this post

    Hello guys,

    If you leave data-role and initialize it after that, the ScrollView will be initialized twice (this may lead to unexpected issues). Either remove the data role to initialize it manually or specify the change event declaratively too, like this:
    <div data-role="scrollview" data-change="onChange">
        ...
    </div>


    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Afxe
    Afxe avatar
    10 posts
    Member since:
    Jun 2012

    Posted 25 Jun 2012 Link to this post

    Yeah you are right. It makes sense. Thank you for the clarification.
  8. Elias
    Elias avatar
    4 posts
    Member since:
    Jun 2012

    Posted 25 Jun 2012 Link to this post

    Yes, that makes sense, thanks.

    I'm struggling to figure out how to tie the scrollView widget to a mvvm or even to just access the dom object referred to by the page index. How do you get/know/access the scrollView item you're looking at?

    Can't seem to get a good grip on this, any suggestions of where I should start? Thanks!

    Elias

    Edit: Found no built in way to do this, but by generating scrollview pages with a css class with the same name as the page index number should work.
  9. Antonio
    Antonio avatar
    15 posts
    Member since:
    Oct 2012

    Posted 13 Dec 2012 Link to this post

    On the Q2 release, is there an event that gets fired after you've changed the orientation? My problem is, supposed I am in page2. When I rotate my iPhone 3GS, right after the windows have loaded, the content of the page is automatically moved to page 1. If I am in page 4, after the orientation change, the current page becomes page 3. 

    Is there an event that I can use to move these page back to its current position?
  10. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 13 Dec 2012 Link to this post

    Hi Antonio,

    In Q3 release, the scrollview has been updated to retain its page on orientation change in case it contains elements with data-role=page. If you use this version, you will not need to write any custom code to overcome this behavior. 

    In case you need to use the Q2 release, you may use the orientationchage DOM event

    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!
  11. Antonio
    Antonio avatar
    15 posts
    Member since:
    Oct 2012

    Posted 13 Dec 2012 Link to this post

    Thanks Petyo.

    Yeap. I have my whole site in Q2 version. I wouldn't want to upgrade my installation there for now. Perhaps on the next site revamp.

    I also noticed the same thing with the View itself. For example, if I have a long mobile web page and I am at the bottom of the page. When I rotate the phone, the view takes me back to the very top. Is there a work around this in Q2? Or is there any specific script in Q3 that I can just copy to my Q2 installation? Thanks!

    Thanks in advance!

    Best regards,
    Antonio
  12. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 18 Dec 2012 Link to this post

    Hello Antonio,

    The behavior you observe is present in Q3, too (and is there by design, in fact).  As the dimensions of the content change, this is the safest way to reset the view to usable state after the orientation changes.

    If there is enough demand, we will revisit this behavior, and probably provide methods for fine-grain control over that behavior. Feel free to describe this request in our UserVoice tracker.

    Thank you,
    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