Hi,

we want to implement a image gallery with a scrollview within a modalview.
We have articles with different images and want to show these images if the user clicks on a link to the image gallery.
When the user clicks the link we replace the data source from the scrollview with the a new datasource with the new images (with setDataSource) and open the modalview. The pages are set with the help of a template.

The problem is, that the datasource doesn't get updated properly.
If we don't set a datasource for the scrollview on the init of the application the scrollview shows the amount of items (pager) but the the pages doesn't contain any data. The template doesn't is not set.
If we set a dummy data source at the beginning for the scrollview and change the datasource when the user opens the modalview the dummy data is still visible. Furthermore if the new datasource contains more items than the dummy datasource, the new items start after you scroll through the dummy pages.

This is the link to the dummy project in jsbin if no initial datasource is set: http://jsbin.com/IZaYexac/15/edit
and this is if a initial dummy datasource is set: http://jsbin.com/IZaYexac/16/edit

Am I doing anything wrong during setting the datasource?
Thank you very much

Here is the Code from JSbin


Best regards
Mar

Only I can make such combinations, but here it is.
I have a Google Map JavaScript inside one of the ScrollView's pages. The problems is with swiping, dragging as you might guess.
With the Scrollview inside ScrollView  scenario had no problems regarding touch (even though it's not officially supported as I've been told).
But in this case it seems I'm out of luck. When I drag the Google map, the ScrollView drags also. And the View in which the ScrollView resides also scrolls....
I started with this piece of code
google.maps.event.addListener(map, 'dragstart', function() { setDragFlag(true); }); 
But stuck on binding  touchstart to the kendoMobileScrollView
$("#svMD").getKendoMobileScrollView().pane.userEvents.bind("touchstart", SomeFunctionWhichWritesToTheConsole)
Don't know why but touchstart event doesn't want to fire at all

I have a mobile app.
One of the views structure looks like this:
(the view's data-stretch attribute is set to false! otherwise my whole layout goes crazy)

Large ScrollView:
  -> page1:
         -> a chart      
         -> and below a grid
  -> page2:
         -> some buttons, a date picker
         -> a chart      
         -> and below a grid
  -> page3:
         -> a ListView:
                  -> some text
                  -> an input
                  -> a small ScrollView with some pictures 
I have issues with the last small ScrollView. I initiate this ScrollView only when it's into view (when the large ScrollView scroll event fires on third page).
The problems is it doesn't have any size, but when I resize the browser window the pictures show up and everything works ok.
If I statically define the ScrollView with no databinding, it also works without having to resize the browser window.
Below is the code generated when i dinamically initiate the scrollview. The problems seems to be with the second div which has height:1px

I'm setting up the following scrollview. I'm not adding any html data element as in the docs in order to be able to use the kendo template where useWithBlock is set to false for perfs:


When going to the page the first time, i can see the scroller but it doesn't work: I cannot swipe from a page to another.
Then when I'm trying to rebind the data (because the template is used with different data) I can't see any changes.

Please advice,

Many Thanks

I have the following that works fine to show a series of images I have stored on AWS using a list view


I am trying to get this working using the scroll view - thought it would be a simple case of changing the data-role to "scrollview" but I get nothing 

What am I missing??

Many thanks in advance

Hello,

I have a small scroll view generated dynamically when I retrieve some data from the server.

Basically, I have the following template:


As you can see, I have a button with a class of invite or uninvite depending on the scenario.
In my js, I have a event listener binded to the on click action that trigger a js function. But unfortunately, I'm noticing that after the second element, the buttons do not trigger the js function as they are generated when the user scroll from an element to another ( I believe its better for perfs, great) 


So my question is, how do I bind an event to my button in this scroll view for every element generated by Kendo UI when a user is swiping from an element to another ? If possible, I'd like to avoid listening for a user moving from an element to the other to rebind my buttons again (and onclick does not work on phonegap I think).

Thank You :)

Hi there, it's me again with another ScrollView-issue:

I have an array of knockout-viewmodels.
For each viewmodel, I'd like to get a page in my ScrollView-instance.

Now I get the problem described in your documentation: If there's a whitespace, you'll get an extra page.
Unfortunately the template-workaround doesn't work here and I cannot work with datasource as my knockout-bindings are initialized before I initialize kendoUI Mobile (there is much more going on in the app, so changing that order would be a lot of refactoring which I'm trying to avoid).

Because I can't find a way to define a specific number of pages (as a simple workaround), I'm hopping for your help :)

Thanks for your help!

Cheers,
Richard

Hey guys

I have pages inside my scroll-view which provides an interactive "settings-mechanism".
What that means is my application will react to a vertical "swipe-gesture", and will change time-settings according to the scrollView-page.

This works very smooth and I'm quite happy as these are my first "kendo-UI steps".
Now the problem begins once you don't swipe straight, but your vertical movement is enough to trigger the "start page-change"-animation.
So what I need to do is to disable the scrollView, once the settings-adjustment got initiated.

My workaround is to disable this functionallity when I detect a more vertical swipe than a horizontal one (through dragstart & drag).
But this is not good for the enduser as he can start a settings-adjustment on the page and then change to a scrollView-page-transition with the same movement. 

On my journey to find a solution, I was mainly looking for a way to achive these events/methods:
-Events:
  AboutToChange (I don't understand the Changing-Event... It fires when the user already made a full transition... or is this a Chrome-Bug?)
  Cancled
-Methods:
  Enable / Disable the ScrollView

Like in the title mentioned, I thing these are quite essential things...I don't feel like I'm doing something very exotic here, or am I?
Maybe I'm missing something, because I can't find threads about that here, nor on stackoverflow.

So are there truely no workarounds / properties / whatever to "fix" my problem? Or should I change my widget with something else (maybe from the community?).

Thank you very much.

Cheers,
Richard

Hi!

I need to do a scrollTo just after load an scrollview. If i put my function just after loading code it do anything. If put the same sentence with a 1 second delay using setTimeout it works great. Then, there's one event at kendoMobileScrollView that throws when the load it's complete to call my sentence at this place?

Thanks

PD: This is my loading function:

function CargaDatos(){
$("#scrollview").kendoMobileScrollView({
        dataSource: {
            transport: {
            read: function (options) {

                db.transaction(function(tx) {

///WEB SQL LOADING CODE OMMITED, TOO EXTEND.

});

            }
        },
            serverPaging: true,
            pageSize: pagElements*9,
            schema: {
            data: "photos",
            total: "total_items"
        }
        },
        itemsPerPage: pagElements,
        template: kendoTemplate,
        contentHeight: '100%',
        enablePager: false
    });
    
    setTimeout('$("#scrollview").data("kendoMobileScrollView").scrollTo(6, true);',1000);
}

Hello

I have 2 problems with the ScrollView:

First i'm using data-stretch="true" and data-content-height="100%" but my Scrollview is not rendered with 100% (of possible space) 
see here:
http://jsfiddle.net/mU9H3/ 
and ScrollView within Modalview 
http://jsfiddle.net/xY6rU/

2nd problem is the page 2(+) is only touchable (to swipe) till the text ends.(first page woks fine)

i can't find the failure. 
(i try to use scrollview in mobile app within modalview)

thx for the advice!