Show AJAX Loading Panel on initial page load

13 posts, 0 answers
  1. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 05 Jul 2011 Link to this post

    I need to have ajax pannel prograss bar to show for radgrid on initial page load...

    I tried the following code, but does not work.



    <%

     

    @ Page Language="C#" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="Portal.UI.History.test2" %>

     

    <%

     

    @ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

     

    <!

     

     

    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>

     

     

     

    <script type="text/javascript">

     

     

     

    function pageLoad(sender, eventArgs) {

     

     

     

    if (!eventArgs.get_isPartialLoad()) {

     

    $find(

     

    "<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");

     

    alert(<%

     

    = RadAjaxManager1.ClientID %>);

     

    }

     

     

    // alert('hi');

     

    }

     

     

    </script>

     

     

    <

     

     

    body>

     

     

     

    <form id="form1" runat="server">

     

     

     

    <div>

     

     

     

    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server"></telerik:RadScriptManager>

     

     

     

    <

     

     

    telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

     

     

     

    <AjaxSettings>

     

     

     

    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

     

     

     

    <UpdatedControls>

     

     

     

    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />

     

     

     

    </UpdatedControls>

     

     

     

    </telerik:AjaxSetting>

     

     

     

    </AjaxSettings>

     

    </

     

     

    telerik:RadAjaxManager>

     

    <

     

     

    asp:Panel ID="Panel1" runat="server">

     

     

     

    <asp:Panel ID="Panel2" Visible="false" runat="server">

     

    My content:

     

     

    </asp:Panel>

     

    </

     

     

    asp:Panel>

     

    <

     

     

    telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"

     

     

     

    Width="75px" Transparency="50">

     

     

     

    <img alt="Loading..." src="/img/logo.png" style="border: 0;" /></telerik:RadAjaxLoadingPanel>

     

     

     

     

    </div>

     

     

     

     

    </form>

     

    </

     

     

    body>

     

    </

     

     

    html>

     

    --------------------------------

    protected

     

     

    void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

     

    {

     

     

    if (e.Argument == "InitialPageLoad")

     

    {

     

     

    //simulate longer page load

     

    System.Threading.

     

    Thread.Sleep(2000);

     

    Panel2.Visible =

     

    true;

     

    }

    }

  2. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 06 Jul 2011 Link to this post

    Hi Jj,

    It looks that you utilized the code implementation presented in this help topic. Since you are using your custom loading image, can you check whether applying explicility Skin="" attribute for the RadAjaxLoadingPanel produces the desired result? Additionally, debug your code logic to verify that the javascript and server logic is executed as expected.

    Best regards,
    Sebastian
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 06 Jul 2011 Link to this post

    I tried default skin below and verified code logic to verify that the javascript and server logic is executed as expected. But still didn't see progress image showing. I am using v2011.1.413.40



    <
    telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"

     

     

     

    Skin="Default">

     

     

     

     

     

     

     

     

    </telerik:RadAjaxLoadingPanel>

     

  5. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 06 Jul 2011 Link to this post

    IE doesn't work, but Google Chrome works.  Can you help with IE loading panel?
  6. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 06 Jul 2011 Link to this post

    Hello Jj,

    Can you check whether the issue will disappear if you migrate to the latest Q1 2011 SP2 release (2011.1.519) of the suite? Upgrade instructions can be found here.

    Kind regards,
    Sebastian
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  7. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 06 Jul 2011 Link to this post

    If I use the default skins
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"

    Skin="Default">

    instead of

     

    <

     

     

    telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"

     

     

     

     

     

     

     

     

    Width="75px" Transparency="50">

     

     

     

     

     

     

     

     

    <img alt="Loading..." src="/img/logo.png" style="border: 0;" />

     

     

     

     

     

    None of the broswer work.

    Can you send me a working example wioth default skin?

    Thanks
  8. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 06 Jul 2011 Link to this post

    Not wroking. If you have a working example, can you pelase send to me the zip example?This link http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-on-initial-pageload.html#seeAlsoToggle example does not worK! 
  9. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 06 Jul 2011 Link to this post

    I figured it out, need to define panel width in order to make the loading panel works in IE,

    But I still have problem when make the panel load on form load when loading data to radgrid. Loading radgrid is under grid 

     

    NeedDataSource, how to put NeedDataSource under RadAjaxManager1_AjaxRequest?
    I tried the following, doesn't work.

     

     


     

     

     

    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

     

    {

     

     

    if (e.Argument == "InitialPageLoad")

     

    {

     

     

    //simulate longer page load

     

     

     

     

     

     

     

     

    // System.Threading.Thread.Sleep(2000);

     

     

     

     

     

     

     

     

    // GetData();

     

     

     

     

     

     

    rgMygrid.DataSource = GetData();

    rgMygrid.Rebind();

    Panel2.Visible =

     

    true;

     

    }

    }

  10. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 07 Jul 2011 Link to this post

    Hello Jj,

    If you simply invoke the Rebind() method of the grid from within the AjaxRequest event handler of the ajax manager, this will automatically trigger the NeedDataSource event of RadGrid where you can populate it with data (using conditional check or not, based on your requirements). Try it out and let us know how it goes.

    Greetings,
    Sebastian
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  11. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 12 Jul 2011 Link to this post

    Thanks Sebastian.

    The rebind works. But I got another problem.

    I use the example here http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-on-initial-pageload.html to show ajax panel on form load.

    -------------------------------

    <

     

     

    asp:Panel ID="Panel1" >    
      grid  search button here
       grid export button here

        <
    asp:Panel ID="Panel2">

     

           
        grid

      </

     

     

    asp:Panel>

     

    </

     

     

    asp:Panel>
    -------------------------

     

     

     

     



    I have serach button and grid export button between panel 1 and panel2,
    when use OnAjaxRequest="RadAjaxManager1_AjaxRequest"> on radajaxmanager follow the example, radajax pannel comes fine, grid binds fine, but the grid export button rgEventHistory.MasterTableView.ExportToExcel(); doesn't do the export any more.  Why? and how to solve it? As long as I move export button outside of panel1, the grid export works. Why? and how to solve it?
    ------------------------------------------

     

     

    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

     

    {

     

     

    try

     

     

     

     

     

    {

     

     

    if (e.Argument == "InitialPageLoad")

     

    {

    rgEventHistory.Rebind();

    Panel2.Visible =

     

    true;

     

    }

    }

     

     

    catch (Exception ex)

     

    {

    Portal.UI.

     

    Error.ProcessError(ex);

     

    }

    }

    ---------------------

     

     

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"

     

     

     

    DefaultLoadingPanelID="RadAjaxLoadingPanel1" >

     

     

     

    <AjaxSettings>

     

     

     

    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

     

     

     

    <UpdatedControls>

     

     

     

    <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel1" />

     

     

     

    </UpdatedControls>

     

     

     

    </telerik:AjaxSetting>

     

     

     

    <telerik:AjaxSetting AjaxControlID="rbtnSearch">

     

     

     

    <UpdatedControls>

     

     

     

    <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel1" />

     

     

     

    </UpdatedControls>

     

     

     

    </telerik:AjaxSetting>

     

     

     

    <telerik:AjaxSetting AjaxControlID="Panel2">

     

     

     

    <UpdatedControls>

     

     

     

    <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel1"/>

     

     

     

    </UpdatedControls>

     

     

     

    </telerik:AjaxSetting>

     

     

     

    </AjaxSettings>

     

     

     

    </telerik:RadAjaxManager>

     

    ----------------------------------------------------------------

    Thanks!
  12. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 12 Jul 2011 Link to this post

    Hi Jj,

    Export from ajaxified grid is not supported, you will need to disable the ajax on export operation explicitly. See this help article for more info.

    Regards,
    Sebastian
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  13. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 12 Jul 2011 Link to this post

    Thanks Sebastian.
     
    I have search button click trigers panel2- radgrid is inside panel2, when the search button clicks, in IE, I can see radajaxpanel shows, but in Firefox and Google chrome, I don't see radajax panel showing.  How to fix this?

     

     

    <telerik:AjaxSetting AjaxControlID="rbtnSearch">

     

     

     

    <UpdatedControls>

     

     

     

    <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel1" />

     

     

     

    </UpdatedControls>

     

     

     

    </telerik:AjaxSetting>
    --------

    <asp:Panel ID="Panel1" >    
      grid  search button here
       grid export button here
        <
    asp:Panel ID="Panel2"> 

     

           
        grid

      </ 

     

     

     

     

    asp:Panel>

     

    </

     

    asp:Panel>

  14. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 13 Jul 2011 Link to this post

    Hello Jj,

    Since the second panel is wrapped in another asp panel, the more appropriate means would be to specify the ajax setting programmatically as explained in this topic (locating the nested panel inside its parent using the FindControl("Panel2") method).

    Also verify that you are using the latest release 2011.1.519 of the suite.

    Best regards,
    Sebastian
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017