Initialize scrollview with a dynamic page number

2 posts, 0 answers
  1. Peter Terkildsen
    Peter Terkildsen avatar
    16 posts
    Member since:
    Mar 2010

    Posted 30 Jun 2015 Link to this post

    Hi,

     I have created an AngularJS project containing an image gallery. Now I would like to display a Telerik Kendo UI Window widget containing a scrollview in order to create a lightbox-effect. Most of it works fine, but I need to be able to dynamically set the initial page. I know that I can set the k-page option, but I'm not sure how to set this value when the user clicks an image. Please observe the following HTML:

    <div class="gallery-content">
        <div class="container">
            <div class="gallery-grid" data-ng-show="item.Files.length">
                <div class="picture" data-ng-repeat="File in item.Files"><a ng-href="#" ng-click="openImageLayer($event, File, $index)"><img data-ng-src="/Admin/Public/GetImage.aspx?Image=/Files/Files/Intranet/{{File.FileName}}&amp;Width=200" /></a></div>
                <a href="#" class="btn-add-new hidein-mobile"><span class="icon icon-add-new"></span></a>
            </div>
        </div>
    </div>

    <div class="popup-holder" kendo-window="imageLayer" k-title="'Billede'" k-on-open="win1visible = true" k-on-close="win1visible = false" k-visible="false" k-modal="true" k-options="kendoWindowOptions">
        <div kendo-mobile-view="view" k-stretch="true" id="scrollview-home">
            <div kendo-mobile-scroll-view="scrollview"
                 k-data-source="photos"
                 k-content-height="'100%'"
                 k-enable-pager="true"
                 k-pager-overlay="true"
                 k-options="galleryOptions" k-page="{{page}}">
            </div>
        </div>
    </div>

     

    When the user clicks an image, the following function is called:

            $scope.openImageLayer = function ($event, file, index) {
                $event.preventDefault();
                $scope.activeFile = file;
                $scope.page = index;
                console.log($scope.page);
                $scope.imageLayer.open().center();
            }

     

    However, the Scrollview does not observe the $scope.page value. I suspect this is due to the fact that the Scrollview has already been initialized.

    Regards,

    Peter

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 01 Jul 2015 Link to this post

    Hi Peter,

    You may use the scrollTo method to scroll to a given page at run time.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top