ScrollView - Swipe direction, Binding with dynamic data

[Niteen]

HI,

I am new to Kendo Mobile. 

I have some below queries. 

1. How to get the swipe direction (Left/Right) of scroll view?

2. In my scenario, I am binding ScrollView with dynamic data by fetching a single item at a time. I am re-binding the same template with received data. How can i achieve paging (prev/next functionality) with the same approach? 

3. Due to dynamic data, ScrollView doesn't maintain screen height properly. If data is large it hides some content if I hard code the height. How to resolve this?

Please could you answer above mentioned queries?

Thanks in advance.

 

[Boyan Dimitrov]

Hello,

Straight to your questions: 

   1. The changing event of the Kendo UI ScrollView can be useful in this case. The event arguments provide information about the current and next page. Both parameters can be used to determine whether user goes to next page or previous page. 

   2. The solution that might be convenient for you is to place static previous and next buttons as shown in the http://dojo.telerik.com/EJiNE example. When user clicks on the button scroll view shows next/previous data if any. 

   3. As mentioned in the Display of Incomplete Pages article there is no built-in way to show the content if it is different for each page. In the example it is shown how to add JavaScript logic in the template, which might be a possible solution for adjusting the height of the container. 

Regards,
Boyan Dimitrov
Telerik by Progress

[Niteen]

Hi Boyan,

Thanks for your reply.

I am quite new to Kendo UI.

My query no. 2 scenario is like, I am fetching only a single record using ajax call and binding received response using template.

I don't want to give static prev/next buttons and handle this using The Changing event or could you suggest me any alternative? 

Considering above scenario, Could you please tell me how to maintain paging and prev/next page functionality without prev/next static buttons?

Thanks in advance.

Niteen

 

[Tsvetina]

Hi Niteen,

If you are going to load a single item only at a time, it isn't possible to use the built-in paging buttons, as they are generated based on the data in the DataSource. That is why my colleague said that you would need the static buttons.
If you don't want static buttons, you can hide buttons altogether (disable the pager) and use only swipe gestures to change pages.
http://dojo.telerik.com/@tsveti/oHAvo/4


Regards,
Tsvetina
Telerik by Progress

[Niteen]

Hi Tsvetina,

Thanks for your suggestion.

I have implemented the same way as u suggested and its working as expected. Many thanks !!

In your sample you have bounded loadNext function to changing event which adds data to data source.  

1. Is this feasible. Is this affect size of application if I have hundreds of records in my data source.

2. Could you please tell how the left to right swipes works in above scenario. As you are chaining value of i on changing event and it it is still maintaining previous page value. How it is maintaining prev/next records properly.

Please suggest. 

Thanks in advance.

 

[Niteen]

Hi Tsvetina,

One more query.

3. I have kept contentHeight to 100% and data-stretch="true" as well. But if dynamically loaded content is larger than the screen size then some content getting skipped and no vertical scroller getting added. I do not want to give fixed height.

 

Thanks. Please suggest.

[Tsvetina]

Hello Niteen,

What I am doing is adding a new item to the ScrollView with each left swipe. When I do this, a new page is created in the ScrollView. If you load a large number of pages, this could influence performance, but otherwise, the ScrollView cannot perform paging if there are no pages to scroll between.

You should consider replacing the ScrollView with a simple MVVM form, which is initially bound to the first page/item of data. Then, wrap the form in a Kendo Touch widget to detect swipe gestures. When a swipe occurs, get the next page of data and re-bind the view model with the new values. You can also add animation effects using Kendo Effects. With such an implementation, previous pages of data will not be stored and the page output will be small, no matter how many records you have.

Regards,
Tsvetina
Telerik by Progress

[Niteen]

Hi Tsvetina,

Many thanks for suggesting the approach. This approach will be feasible to me as I have hundreds of records.

Could you please say something on dynamic height? How can I set it 100% for any size of content considering I have bounded div element to dynamic content. Div tag should be resized to any length size of dynamic content.

 

Thanks in advance.

 

[Tsvetina]

Hi Niteen,

The behavior that you describe is caused by the data-stretch="true" setting. It expands the view contents to 100% and disables the view scrolling. If you want to preserve the scrolling option, remove the data-stretch="true" setting. In this case, the view will be as high as it contents.
If you want the view scroll container to take up all available vertical space, you can wrap all contents of the view in a container and set its height to match the view content element height using JavaScript. You can do this in the view show or afterShow event:

function resizeViewContents() {
  $("#container").height($(".km-content").height());
}

Dojo is available here: http://dojo.telerik.com/@tsveti/ewepI/2

Regards,
Tsvetina
Telerik by Progress