This is a migrated thread and some comments may be shown as answers.

Initialize scrollview with a dynamic page number

1 Answer 69 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Peter Terkildsen
Top achievements
Rank 1
Peter Terkildsen asked on 30 Jun 2015, 05:04 AM

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

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 01 Jul 2015, 03:23 PM
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!
 
Tags
ScrollView (Mobile)
Asked by
Peter Terkildsen
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or