Loading Message not showing when ListView fires on data-show of View

[Dan]

I have a ListView in a Mobile View that wires to an ASMX datasource.  Works great and shows me a nice loading message while the data is retrieved.

I then Added a main view with a menu of options, and moved the init of the ListView to the data-show event on the Mobile View it was moved to.  Now I do not get a Loading message while the data is retrieved for my ListView  

Is this normal behavior?

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Default.Master"

    CodeBehind="default.aspx.vb" Inherits="Mobile._default1" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <div data-role="view" data-title="Mobile Home" id="home" data-transition="slide">

        <header data-role="header">

            <div data-role="navbar">

                <span data-role="view-title"></span>

            </div>

        </header>

        <ul data-role="listview" data-style="inset">

            <li><a href="#myDatabase">My Database</a></li>

            <li><a>My Favorites</a></li>

            <li><a>My To-Do's</a></li>

            <li><a>My Proposals</a></li>

            <li><a>My Alerts</a></li>

        </ul>

    </div>

    <div data-role="view" data-transition="overlay" data-title="My Database" id="myDatabase"

        data-show="getMyDatabase" data-layout="mobile-view">

        <ul id="myDatabaseList" data-style="inset" data-role="listview">

        </ul>

    </div>

    <div data-role="layout" data-id="mobile-view">

        <header data-role="header">

            <div data-role="navbar">

                <a class="nav-button" data-align="left" data-role="backbutton">Back</a> <span data-role="view-title">

                </span><a data-align="right" data-role="button" class="nav-button" href="#home">Home</a>

            </div>

        </header>

        <footer data-role="footer">

            <div data-role="tabstrip">

                <a data-icon="contacts">My Database</a> <a data-icon="recents">To-Do</a> <a data-icon="bookmarks">

                    Proposals</a> <a data-icon="about">Alerts</a>

            </div>

        </footer>

    </div>

    <script id="myDatabaseTemplate" type="text/x-kendo-template">

        <div style="font-weight:bold;font-size:22px">#= Name #</div>

        <div style="font-weight:normal;font-size:15px">(ID: #= ID #)</div>

    </script>

    <script type="text/javascript">

        var app = new kendo.mobile.Application();

 

        /////// Handle My Database View

        function getMyDatabase() {

            $("#myDatabaseList").kendoMobileListView({

                dataSource: dataSourceMyDatabase,

                template: $("#myDatabaseTemplate").text(),

                pullToRefresh: true

            });

        }

 

        var dataSourceMyDatabase = new kendo.data.DataSource({

            transport: {

                read: {

                    contentType: "application/json; charset=utf-8",

                    url: "http://localhost/MyDatabase.asmx/Test",

                    dataType: "json",

                    data: { UserID: "JS" }

                },

                //data: { UserID: "JS" },

                parameterMap: function (options) {

                    return kendo.stringify(options); // kendo.stringify serializes to JSON string

                }

            },

            schema: {

                data: "d.MyDatabase"

            }

        });

 

        ///////

 

    </script>

</asp:Content>

I may have broken something, because the ListView no longer scrolls and the PullToRefresh doesn't work (in Chrome) when fired this way

[Dan]

Well the loading popup seems to be related to pullToRefresh - When I turn that off the popup comes back.  Is that a bug?

Also, can you please comment on my strategy for displaying multiple Mobile Views in a single page, getting data for each Mobile View on the data-show event of each view.  This seems to break the page.

[Petyo]

Hi Dan,

This is by design.  As the pull to refresh itself contains a loading indicator, the loading popup is hidden when pullToRefresh is enabled. 

As per your second question, the kendo mobile widgets do not support multiple initializations. You should initialize the widget in the init event handler - like in our online example. 

Kind regards,
Petyo
the Telerik team

[Dan]

Thank you for the quick reply.  Ends up I had the Scripts in the Master Page in the wrong order - rearranged them per documentation and things seem to be working properly now.

Is there a simple way to add the Loading popup while keeping the PullToRefresh enabled as well?  Otherwise you end up on a blank page with no indication it is loading for a couple of seconds on initial load

[Petyo]

Hello,

You can show the loading popup manually in the view show event handler, then hide it once the datasource is ready. See the showLoading/hideLoading methods in our docs. 

Regards,
Petyo
the Telerik team

[Dan]

Thanks, but I can't figure this one out.  I understand how to hide and show the Loading window, but if I simply sandwich the code that is going and retrieving the data the first time - the show and hide fire instantaneously - presumably because the data is being retrieved asynchronously.  I am not sure how to fire the hide function after the data is retrieved.  

For instance see below:

function getMyDatabase(e) {

    app.showLoading();

    if (isValidSession()) {

        var wsParams = {

            "UserID": UserID

        };

        var dsMyDatabase = new kendo.data.DataSource({

            transport: {

                read: {

                    type: "POST",

                    contentType: "application/json; charset=utf-8",

                    url: virtualDirectory + "/CRM/MyDatabase.asmx/Read",

                    dataType: "json",

                    data: { callParams: wsParams }

                },

                parameterMap: function (options) {

                    return kendo.stringify(options);

                }

            },

            schema: {

                data: "d.MyDatabase",

                model: {

                    id: "ID"

                }

            }

        });

 

        $("#lMyDatabase").kendoMobileListView({

            dataSource: dsMyDatabase,

            template: $("#tMyDatabase").text(),

            pullToRefresh: true,

            style: "inset",

            click: function(e) {

                 app.navigate("#vCustomer?ID=" + e.dataItem.ID);

            }

        });

    }

    app.hideLoading();

     

}

The above does not work.

Where should I put the app.hideLoading(); in this case to make this show and hide as the data is loaded?  I don't see a documented requestEnd or other such event to wire to... ?

[Georgi Krustev]

Hello Dan,

 
You can wire the change event of the DataSource. It will be raised when the request finishes and it is successfull. Check this for more information.

Regards,
Georgi Krustev
the Telerik team