UI Router sticky state onReactivate refresh kendo mobile Lis

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>
</div>

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