UI Router sticky state onReactivate refresh kendo mobile Lis

Posted by riche on 20-Oct-2015 10:33

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 do not use the $state.go in my back buttons, but use $window.history.back because I want the back buttons to work "as expected", so I cannot use the reload parameter of that function.

I wired up the onReactivate 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 originally did try to just do a $state.reload() and rebuild the page, and it did work in that it calls my init function in the controller and I could use the flag to know to request the data right way, but the listview would not build. The request for data was sent and retrieved, but the listview was empty.

I would prefer to just refresh the list if possible because the service has the kendo datasource with the updated data already, so there really is no need to make a call to the database again.

So, my setup for the listview works fine normally, but only breaks if I refresh in the onReactivate in that they are all there, but overlap each other because every li in the list starts at 0 (the update is in there though, so it did refresh).

I'm assuming that it is due to the fact that it needs to do it later. If so, how can I do that?

Any ideas on how to get the refresh method to work properly? Or is there a better way to do this?

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>

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 (activityInquiryService) {
        if (activityInquiryService.model.reloadList && activityInquiryService.model.reloadList == true) {
            activityInquiryService.model.reloadList = false;
            var item = angular.element("#activityListView").data("kendoMobileListView");
            if (item) {

All Replies

Posted by egarcia on 21-Oct-2015 15:29


> So, my setup for the listview works fine normally, but only breaks if I refresh in the onReactivate in that they are all

> there, but overlap each other because every li in the list starts at 0 (the update is in there though, so it did refresh).

This issue an issue that is more on the Kendo UI side (and potentially Angular) than on the Mobile / OpenEdge / JSDO side.

I wonder if the issue that you are seeing is caused by having the Kendo Mobile ListView nested into a Kendo Mobile Scroller.

I found the a reference to similar issue in the Telerik Kendo UI forum: www.telerik.com/.../scrollview-size.

I took a quick look at the code for kendo.mobile.listview.js (kendo-ui-core) and found that function putAt(element, top) is the one that adds the style transform translate3d. If the translate3d is generated with (0px, 0px, 0px), then the problem is that somehow the top parameter that is passed to the function is 0.

I would suggest to check if the issue is happening because the Kendo Mobile Scroller and check for with the people in the Kendo UI Forum:


I hope this helps.

Posted by riche on 22-Oct-2015 10:00

You are correct, there is something going on with the scroller. If I try to do anything with it when I am doing the refresh of the listview, I cannot even find it. I just get undefined. So, this is somehow breaking it. If I remove the scroller, it works as expected, but I am not using a kendo view, so need that scroller so that it doesn't hide content behind the footer and the footer stays put when I scroll. I'm also using the pull to refresh of the scroller because it allows me to handle how the refresh happens, while the listview does not.

var listView = angular.element("#activityListView").data("kendoMobileListView"); will always return undefined.

I posted on the stackoverflow forum before this one and was told to put it here too. I have had no responses there (I don't pay enough to post on the Telerik forum directly apparently).

I tried to just go the other route and call $state.reload() which makes it reload the controllers and everything, and I have access to the listview, but not the scroller in this instance and it never builds the listview because of it. Once again, if I remove the scroller, it works this way too.

Posted by riche on 23-Oct-2015 09:09

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 above, if I set k-load-more="false" it works. I tried it with endless-scroll too and both have the same effect.

This thread is closed