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>• #= 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.
<
div
style
=
"height: 62px; transform-origin: left top 0px;"
>
<
div
class
=
"k-virtual-page km-virtual-page"
style
=
"width: 0px; height: 62px; transform: translate3d(0px, 0px, 0px);"
></
div
>
<
div
class
=
"k-virtual-page km-virtual-page"
style
=
"width: 0px; height: 62px; transform: translate3d(0px, 0px, 0px);"
>
<
div
class
=
"cl-asset-image__image"
style
=
"background-image: url('imageUrl');"
title
=
"Capture.JPG"
></
div
>
</
div
>
<
div
class
=
"k-virtual-page km-virtual-page"
style
=
"width: 0px; height: 62px; transform: translate3d(0px, 0px, 0px);"
>
<
div
class
=
"cl-asset-image__image"
style
=
"background-image: url('imageUrl');"
title
=
"giphy.gif"
></
div
>
</
div
>
</
div
>
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 :
<
div
data-role
=
"scrollview"
data-content-height
=
"100%"
data-pager-overlay
=
"true"
>
<
div
data-role
=
"page"
style
=
"white-space : normal;"
>
<
span
style
=
"text-align:center;"
>Privilege Club: Mouawad</
span
>
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 ?