MobileScrollView, use kendo.ui.progress instead of app.ShowLoading()

[Ruud]

Hi,

I have a scroll view with several embedded mobile views, each with 1 or more mobile list views on them. ​The list views are configured to use AJAX calls to get their data. To ease the scrolling experience, I load all the list view data as soon as the user navigates to the view with the scroller.

All works great, except that the ShowLoading icon will be ​shown as long as any individual list view​ is still busy with the ajax call. This will block the scroller from being used; which i do not want. My user should be able to swipe to other views while listviews are still loading. A progress indicator on the mobile listview itself (kendo.ui.progress) would be clear enough that it is still loading and will not block the scroller.

So my question is, what is the best approach to take here? Ideally, I would like to switch off the showLoading function for AJAX calls completely and use the kendo.ui.progress by default on any ajax call. Can that be centrally configured? I tried several approaches, but none of them seem to work properly.

Best regards,

Ruud

[Petyo]

Hello Ruud,

What you describe is not supported out of the box, but can easily be hacked. You may override the showLoading/hideLoading methods of the listview widget instances and replace them with a custom call. Notice that kendo.ui.progress does not have specific mobile theming, though.

Should you decide to do that, you may obtain the widget reference like this. 

Regards,
Petyo
Telerik

 

 

[Ruud]

Hi Petyo,

Thanks! This seems to work. What I did is the following:

Configuration:
Kendo UI Mvc server wrappers; one MobileView with a scroller, scroller has multiple listviews configured to use AJAX bindings

Issue:
Only the listviews themselves should show loading icons, not the mobileview itself. This enables users to use the sroller while some listviews are still (AJAX) loading.

Resolution:
- On the "Init" event of the mobile view, the "loader" property is set to null: $("#editflockdetails").data("kendoMobileView").loader = null; 
- On each of the listview which requires to show a loading icon, add the following events on the dataSource: RequestStart and RequestEnd. Use a JavaScript function like this:
function ShowSummaryLoading(e) {
        kendo.ui.progress($("#lvwweighingsummary"), true);
    }

Follow up
That's it! A true async experience for the user. Only open point here is I would like to use a generic js function to accomplish this. I cannot seem to find the parent listview of a dataSource object however. So, when I use the RequestStart event, the "e" parameter will be the dataSource itself. Is it possible to get a reference to the parent object (the listview) for which this dataSource is used? 

Best regards,

Ruud

[Petyo]

Hello Ruud,

Nullifying the loader reference of the listview may result in javascript errors. I am not sure if it will, though.

Now, referring the widget from the datasource is not possible - one DataSource may be bound to multiple widgets and does not keep track of them (the reverse applies, though).

What you may do instead is to override the methods on the widget prototype level:

kendo.mobile.ui.ListView.prototype.showLoading = function() { ; }
kendo.mobile.ui.ListView.prototype.hideLoading = function() { ; }

Please give this approach a try. 

Regards,
Petyo
Telerik