Hi,

Is it possible to render the Pager of a ScrollView in the footer of its parent View? I want to give the user a visual clue that there are more items to scroll through and on which page they are currently at. Basically I want the pager to be visible at all times and that the content of the page in the ScrollView stays scrollable vertically.

Kind Regards,

Marco

Hello,

I'm using a kendo scrollview for a web application with a local datasource populated by a call to a controller.  The data retrieval and feeding seems to be working properly and there is no issue there.

The issue I am having is making the scroll view look good.  It seems that when the scroll view renders that it renders all the pages and the width of my page becomes elongated.  If you scroll you see the other pages and their items.

We are trying to show users the latest creative they are able to order.  It will usually consist of at least 2 pages.

I tried to follow the demo as best as I could but I think the scrollview behaves different with a local datasource.  My markup is below as well as with the template.

$("#scrollview").kendoMobileScrollView({
                dataSource: creatives,
                itemsPerPage:4,
                contentHeight: "150px",
                //contentWidth: "400px",
                enablePager: false,
                template: kendo.template($("#template").html())
            });

            $("#prev-img").click(function (e) {
                var scrollView = $("#scrollview").data("kendoMobileScrollView");
                scrollView.prev();
            });

            $("#next-img").click(function (e) {
                var scrollView = $("#scrollview").data("kendoMobileScrollView");
                scrollView.next();
            });

***TEMPLATE***
<script id="template" type="text/x-kendo-template">

        @*<div data-role="page">*@
            #for (var i = 0; i < data.length; i++) { #
            <div style="float: left; display: table; border: solid; border-width: 1px; border-color: gray; margin: 2px; text-transform: uppercase;">
                <div style="padding:2px">
                    <a class="thumb thumbshow">
                        <img src="#= data[i].ImagePath #" style="width:150px;height:194px" alt="" onerror="this.src='@Url.Content("~/Content/images/No_Image_Available.png")'">

                    </a>
                </div>
                <div style="display:table-cell;vertical-align:top;padding-left:5px;height:215px; width:110px;padding-right:5px;position:relative">
                    <div style="font-weight:bold; margin-bottom:10px;margin-top:5px;">
                         #= data[i].Description#
                    </div>
                    <div style=" display: inline-block; overflow-y: hidden;  width:110px">
                        <div style=" display: inline-block; height: 215px; width:139px">
                            <div class="CreativeInventory" style="display: inline-block; padding-top: 4px; padding-bottom: 4px; padding-left: 4px; padding-right: 7px; margin-bottom: 4px; text-transform: none; ">
                                # for(var j=0; j < data[i].CreativeList.length; j++){ #
                                <p>&bull; #= data[i].CreativeList[j].Media #</p>
                                # } #

                                @*#= data[i].CreativeList[0].LongDescription #*@
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            #}#
        @*</div>*@
    </script>

I will also attach 2 images showing how the scrollview renders - mainview shows the first page of the scroll view and notice the window scroll bar at the bottom.  scrolledview shows the other pages which seem to be rendered far right of what should be the main viewing area.  The positioning of each of the items is weird too not sure if that is because of our styling or if it is related to my scrollview issues.

We ideally want to show 4 to 5 items per page next to each other and same sized boxes.

Thanks for your help.

Hi Kendo folks,

I'm trying to use the mobile ScrollView in my webapp. It's using Kendo UI AngularJs - I'm wondering if this combination works or not? I'm experiencing a lot pain right now.

1. Mainly, the images won't show - if I inspect the element on the scrollviewer, I will find that's because the "virtual page" has no width or height. When I manually set width and height to it, I see my image.

2. When I call the next() function, nothing happens. I'm sure I have 2 pages, and I'm using datasource

Thanks for help. Happy holidays.

Anna

Dear Team ,

Here is a dojo where I have a simple scroll view working fine

Basic Scroll View Working Fine :http://dojo.telerik.com/OfUbI

When I use the scroll view along with a tabstrip ,the scroll does not work, it does not even show the pager

Scroll Not working with tabstrip : http://dojo.telerik.com/uDeZO/3

Another Issue I have is that when I have multiple images of different sizes in the scroll-view the scroll-view takes the height of the largest image.

Is there any way that this can be made dynamic such that the pager appears directly below the image with small size without leaving blank space in between ?

Or can the smaller images be automatically resized to fit the height of the largest image of the scroll view

Here is the sample for the same : Scroll with different size images

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.

I have multiple pages in a scroll view.

To wrap the text with in each page I have used the following :

I have used style="white-space : normal;" to wrap the text.

I saw this as a solution mentioned in one of the very old posts in this forum.

Please let me know if there is any other or better solution now.

This works fine but when I try to center align a text with in the span element it is still aligned left

How can I make it aligned center ?

I also used width:100% for the span element but invain.

Could you please help me with this simple task ?