locked
ajax updateprogress RRS feed

  • Question

  • User351619809 posted

    Hi All,

      I have the following code on my page, but I don't see the wheel spinning when I try to run the application.

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
        </asp:ScriptManager>
    
        <div>
           <center> History table</center> 
        </div>
        <div>
    
                 <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="pannel">
                                <ProgressTemplate>
                                    <div id="dvProgress" runat="server" style="; top: 300px; left: 550px;
                                        text-align: center;">
                                    </div>
                                    Please wait to retrieve data...
                                </ProgressTemplate>
                            </asp:UpdateProgress></div>
    
        <div>
    
                                        <asp:Image ID="Image2" runat="server" Height="46px" Width="47px" 
                                            ImageUrl="~/Images/25-1.gif" />
            <asp:GridView ID="GrdHistory" runat="server" AutoGenerateColumns="False" CellPadding="4"
                AllowSorting="True" CssClass="labelBoldx"  ShowFooter="True" Font-Size="Small"
                ForeColor="Black" 
                AllowPaging="false"   HeaderStyle-BackColor="#999999"    >
              
                <Columns>
                </Columns>
            </asp:GridView>
            </div>
    
        </form>
    </body>
    </html>

    I didn't write the grid columns, but this grid takes too much time to load. I want that spinning wheel to display, but it doesn't display at all.

    any help will be appreciated.

    Tuesday, October 21, 2014 12:19 PM

Answers

  • User2103319870 posted

    As a solution you can use the Jquery code to show a loading icon on pageload like given below

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head2" runat="server">
        <title></title>
        <!-- jQuery Plugin -->
        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      
        <script type="text/javascript">
            //    Change the value 5000 to a limit till your Gridview load completely
            $(window).load(function () { $("#spinner").fadeOut(5000); }) 
        </script>
       <style type="text/css">
        #spinner {
            ;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            /*Add a loading image here*/
            background: url(Your Loading Image Path) 50% 50% no-repeat #ede9df;
            }
       </style>
    </head>
    <body>
        <form id="form2" runat="server">
        <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true">
        </asp:ScriptManager>
        <!-- Preloader -->
        <div id="spinner"></div>
        <div>
            <center>
                History table</center>
        </div>
       
        <div id="content">
            <asp:Image ID="Image2" runat="server" Height="46px" Width="47px" ImageUrl="~/Images/25-1.gif" />
            <asp:GridView ID="GrdHistory" runat="server" AutoGenerateColumns="False" CellPadding="4"
                AllowSorting="True" CssClass="labelBoldx" ShowFooter="True" Font-Size="Small"
                ForeColor="Black" AllowPaging="false" HeaderStyle-BackColor="#999999">
                <Columns>
                </Columns>
            </asp:GridView>
        </div>
        </form>
    </body>
    </html>
    
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 21, 2014 12:43 PM
  • User351619809 posted

    Is it possible to do the above code with javascript? I don't want to use jquery.

    I got the answer in javascript. below is the link:

    http://stackoverflow.com/questions/23906956/show-loading-icon-until-the-page-is-load

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 21, 2014 1:04 PM

All replies

  • User2103319870 posted

    You need to have an associated UpdatePanel with UpdateProgressControl to show the loading icon when any event occurs

    <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true">
        </asp:ScriptManager>
        <div>
            <center>
                History table</center>
        </div>
        <div>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="pannel">
                <ProgressTemplate>
                    <div id="dvProgress" runat="server" style="; top: 300px; left: 550px;
                        text-align: center;">
                    </div>
                    Please wait to retrieve data...
                </ProgressTemplate>
            </asp:UpdateProgress>
        </div>
        <div>
            <asp:UpdatePanel runat="server" ID="pannel">
                <ContentTemplate>
                    <asp:Image ID="Image2" runat="server" Height="46px" Width="47px" ImageUrl="~/Images/25-1.gif" />
                    <asp:GridView ID="GrdHistory" runat="server" AutoGenerateColumns="False" CellPadding="4"
                        AllowSorting="True" CssClass="labelBoldx" ShowFooter="True" Font-Size="Small"
                        ForeColor="Black" AllowPaging="false" HeaderStyle-BackColor="#999999">
                        <Columns>
                        </Columns>
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

    I guess your requirement is to show a loading image on pageload since the gridview takin more time to load. However the above code wont show loading icon unless its triggered by a event like button click or something like that.

    Tuesday, October 21, 2014 12:34 PM
  • User351619809 posted

    The button click is on the parent page. When the user clicks the button, a pop yup comes up and the grid is shown on the pop up page. Below is the code:

          <script type="text/javascript" language="javascript">
              function openpopup() {
    
                  
                  var sel = document.getElementById("lstIdNo");
                  var selectedItem =""
                  var listLength = sel.options.length;
                  for (var i = 0; i < listLength; i++) {
                      if (sel.options[i].selected)
                          selectedItem = selectedItem + sel.options[i].value + ",";
    
                  }
                  window.open("ViewHistory.aspx?Id=" + selectedItem , "List", "scrollbars=yes,resizable=yes,width=1200,height=400");
                 
              }
          
        </script>

    and the code behind is like this:

       Protected Sub btnHistory_Click(sender As Object, e As EventArgs) Handles btnHistoryBuildUp.Click
                Page.ClientScript.RegisterStartupScript(Me.[GetType](), "alert", "openpopup();", True)
            End Sub


    The pop up that comes up shows the grid

    Tuesday, October 21, 2014 12:41 PM
  • User2103319870 posted

    As a solution you can use the Jquery code to show a loading icon on pageload like given below

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head2" runat="server">
        <title></title>
        <!-- jQuery Plugin -->
        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      
        <script type="text/javascript">
            //    Change the value 5000 to a limit till your Gridview load completely
            $(window).load(function () { $("#spinner").fadeOut(5000); }) 
        </script>
       <style type="text/css">
        #spinner {
            ;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            /*Add a loading image here*/
            background: url(Your Loading Image Path) 50% 50% no-repeat #ede9df;
            }
       </style>
    </head>
    <body>
        <form id="form2" runat="server">
        <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true">
        </asp:ScriptManager>
        <!-- Preloader -->
        <div id="spinner"></div>
        <div>
            <center>
                History table</center>
        </div>
       
        <div id="content">
            <asp:Image ID="Image2" runat="server" Height="46px" Width="47px" ImageUrl="~/Images/25-1.gif" />
            <asp:GridView ID="GrdHistory" runat="server" AutoGenerateColumns="False" CellPadding="4"
                AllowSorting="True" CssClass="labelBoldx" ShowFooter="True" Font-Size="Small"
                ForeColor="Black" AllowPaging="false" HeaderStyle-BackColor="#999999">
                <Columns>
                </Columns>
            </asp:GridView>
        </div>
        </form>
    </body>
    </html>
    
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 21, 2014 12:43 PM
  • User351619809 posted

    Is it possible to do the above code with javascript? I don't want to use jquery.

    I got the answer in javascript. below is the link:

    http://stackoverflow.com/questions/23906956/show-loading-icon-until-the-page-is-load

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 21, 2014 1:04 PM