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