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

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

6 Answers 311 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 22 Jun 2012, 02:28 AM
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

6 Answers, 1 is accepted

Sort by
0
Dan
Top achievements
Rank 1
answered on 22 Jun 2012, 03:14 AM
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.
0
Petyo
Telerik team
answered on 22 Jun 2012, 05:48 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dan
Top achievements
Rank 1
answered on 22 Jun 2012, 05:58 AM
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
0
Petyo
Telerik team
answered on 22 Jun 2012, 11:41 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dan
Top achievements
Rank 1
answered on 29 Jun 2012, 03:32 PM
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... ?
0
Georgi Krustev
Telerik team
answered on 03 Jul 2012, 07:39 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView (Mobile)
Asked by
Dan
Top achievements
Rank 1
Answers by
Dan
Top achievements
Rank 1
Petyo
Telerik team
Georgi Krustev
Telerik team
Share this question
or