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

LoadMore refresh makes all items overlap

3 Answers 59 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 23 Oct 2015, 02:12 PM
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();
               }
           }
       }
   })

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 27 Oct 2015, 11:36 AM

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!
 
0
Richard
Top achievements
Rank 1
answered on 27 Oct 2015, 12:15 PM
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.
0
Petyo
Telerik team
answered on 29 Oct 2015, 08:45 AM

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!
 
Tags
ListView (Mobile)
Asked by
Richard
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Richard
Top achievements
Rank 1
Share this question
or