LoadMore refresh makes all items overlap

[Richard]

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();
               }
           }
       }
   })

[Petyo]

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

 

 

[Richard]

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.

[Petyo]

Hello Richard,

 

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

 

Regards,
Petyo
Telerik