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

7 posts, 0 answers
  1. Dan
    Dan avatar
    124 posts
    Member since:
    Feb 2011

    Posted 21 Jun 2012 Link to this post

    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
  2. Dan
    Dan avatar
    124 posts
    Member since:
    Feb 2011

    Posted 21 Jun 2012 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 22 Jun 2012 Link to this post

    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!
  5. Dan
    Dan avatar
    124 posts
    Member since:
    Feb 2011

    Posted 22 Jun 2012 Link to this post

    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
  6. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 22 Jun 2012 Link to this post

    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!
  7. Dan
    Dan avatar
    124 posts
    Member since:
    Feb 2011

    Posted 29 Jun 2012 Link to this post

    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... ?
  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 03 Jul 2012 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready