This is a migrated thread and some comments may be shown as answers.
More actions for each scroll?
10 Answers 190 Views
This is a migrated thread and some comments may be shown as answers.
Afxe
Top achievements
Rank 1
Afxe asked on 22 Jun 2012, 04:49 PM
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

10 Answers, 1 is accepted

Sort by
0
Afxe
Top achievements
Rank 1
answered on 23 Jun 2012, 11:47 AM
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.
0
Elias
Top achievements
Rank 1
answered on 24 Jun 2012, 01:14 PM
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
0
Afxe
Top achievements
Rank 1
answered on 24 Jun 2012, 02:26 PM
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.
0
Kamen Bundev
Telerik team
answered on 25 Jun 2012, 07:42 AM
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!
0
Afxe
Top achievements
Rank 1
answered on 25 Jun 2012, 11:49 AM
Yeah you are right. It makes sense. Thank you for the clarification.
0
Elias
Top achievements
Rank 1
answered on 25 Jun 2012, 08:22 PM
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.
0
Antonio
Top achievements
Rank 1
answered on 13 Dec 2012, 09:27 AM
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?
0
Petyo
Telerik team
answered on 13 Dec 2012, 09:32 AM
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!
0
Antonio
Top achievements
Rank 1
answered on 13 Dec 2012, 11:05 AM
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
0
Petyo
Telerik team
answered on 18 Dec 2012, 08:13 AM
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!
Asked by
Afxe
Top achievements
Rank 1
Answers by
Afxe
Top achievements
Rank 1
Elias
Top achievements
Rank 1
Kamen Bundev
Telerik team
Antonio
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or