More actions for each scroll?

[Afxe]

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

[Afxe]

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.

[Elias]

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

[Afxe]

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.

[Kamen Bundev]

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

[Afxe]

Yeah you are right. It makes sense. Thank you for the clarification.

[Elias]

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.

[Antonio]

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?

[Petyo]

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

[Antonio]

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

[Petyo]

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