ScrollView on web multiple pages showing

2 posts, 0 answers
  1. Sumith
    Sumith avatar
    4 posts
    Member since:
    Feb 2016

    Posted 07 Feb Link to this post

    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.

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2286 posts

    Posted 09 Feb Link to this post

    Hi Sumith,

    I am copying my suggestion from the support thread that you opened in case anyone encounters the same problem:

    ​Such misalignment issues could occur if there are missing CSS styles in the page. The ScrollView requires the Kendo UI Mobile stylesheet. Can you confirm if you included it in your project? You can reference either kendo.mobile.all.min.css or kendo.mobile.skinName.min.css, where skinName is a placeholder for the name of the skin that you want to use, for example kendo.mobile.nova.min.css.

    Here is an example with a working ScrowView:
    https://dojo.telerik.com/iMUsE


    In case this does not help, please post the additional details requested in the support thread.

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top