LoadMore refresh makes all items overlap

4 posts, 0 answers
  1. Richard
    Richard avatar
    6 posts
    Member since:
    May 2015

    Posted 23 Oct 2015 Link to this post

    I'm using angular and ui-router with the extras so that I can use sticky state for maintaining listview scroll position on returning from the detail page in my mobile spa app.

    My list is a kendo mobile listview. I'm implementing crud and would like to reflect the changes made in the listview when returning.
    I wired up the onReactivate callback available in the ui-router sticky states and inject the service that has the flag to tell it whether crud operations have been done and to reload the list. This all works and I can successfully determine if I need to reload the screen.

    So, I try to use the kendo.mobile.ui.ListView refresh method. I use angular.element("#idoflistview").data("kendoMobileListView").refresh(). It does find it and does refresh it, but all of the items are set to have a style="transform: translate3d(0px, 0px, 0px);", so they are all overlapping each other.

    I have tracked it down to the fact that it only happens when I have loadMore true on the listview. If I turn this off, then it works fine.
    So, in the code example below, if I set k-load-more="false" it works. I tried it with endless-scroll too and both have the same effect. 

    Here is the abstract view:

        <div ui-view="activityinquirylist"  ng-show="$state.includes('activityinquiry.list')"></div>
        <div ui-view="activityinquirydetails" ng-show="$state.includes('activityinquiry.details')"></div>
        <div ui-view="activityinquirycrud" ng-show="$state.includes('activityinquiry.crud')"></div>

    Here is how I'm declaring my listview:

        <div id="activityListScroller" kendo-mobile-scroller="activityListScroller" k-pull-to-refresh="true" k-pull="vm.pullToRefresh" k-pull-offset="200" class="scroller-header-footer">
            <ul id="activityListView" kendo-mobile-list-view="activityListView" k-data-source="vm.activityInquiryService.activityInqiuryDataSource" k-template="vm.activityTemplate" k-on-click="vm.listClicked(kendoEvent)" k-auto-bind="false" k-load-more="true"></ul>
        </div>

    The css for the scroller:
       .scroller-header-footer {
       /*      position: fixed !important; */
           position:absolute;
           top: 55px;
           right: 0;
           bottom: 55px;
           left: 0;
       }
       
    Here is the code for the state:

       .state('activityinquiry', {
           //sticky: true,
           abstract: true,
           url: '/activityinquiry',
           templateUrl: 'app/views/cm/activityinquiry.html'
       })
       .state('activityinquiry.list', {
           url: '/activityinquirylist',
           views: {
               'activityinquirylist@activityinquiry': angularAMD.route({
                   templateUrl: 'app/views/cm/activityinquirylist.html',
                   controller: 'activityinquirylistController',
                   controllerUrl: 'controllers/cm/activityinquirylistController',
                   controllerAs: "vm"
               })
           },

           sticky: true,
           deepStateRedirect: false,
           onReactivate: function ($rootScope, activityInquiryService) {
               console.log("reactivating");
               if (activityInquiryService.model.reloadList && activityInquiryService.model.reloadList == true) {
                   activityInquiryService.model.reloadList = false;
                  // $rootScope.$broadcast("reloadList");
                   var item = angular.element("#activityListView").data("kendoMobileListView");
                   if (item) {
                         item.refresh();
                   }
               }
           }
       })
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 27 Oct 2015 Link to this post

    Hello Richard,

     

    most likely, the refresh call is executed before the listview widget is visible. The virtual mode does some manual calculations of the listview items positions/dimensions, and they are not possible to be done when the list is hidden. 

     

    Regards,
    Petyo
    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
  4. Richard
    Richard avatar
    6 posts
    Member since:
    May 2015

    Posted 27 Oct 2015 in reply to Petyo Link to this post

    In that case, wouldn't it do the same thing if loadMore was turned off. If I refresh it without pagination of any kind, it works as expected. It only breaks if I turn k-load-more or k-endless-scroll true.
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 29 Oct 2015 Link to this post

    Hello Richard,

     

    yes, this is correct. the manual item positioning happens only in virtual mode, where it is necessary.

     

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