Initialize scrollview with a dynamic page number

[Peter Terkildsen]

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

[Alexander Valchev]

Hi Peter,

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

Regards,
Alexander Valchev
Telerik