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

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

3 Answers 40 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Ruud
Top achievements
Rank 1
Ruud asked on 05 Aug 2015, 07:46 AM

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

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 07 Aug 2015, 06:37 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ruud
Top achievements
Rank 1
answered on 07 Aug 2015, 08:58 AM

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

0
Petyo
Telerik team
answered on 10 Aug 2015, 08:16 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ScrollView (Mobile)
Asked by
Ruud
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Ruud
Top achievements
Rank 1
Share this question
or