Show AJAX Loading Panel on initial page load

[JJ]

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;

 

}

}

[Sebastian]

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

[JJ]

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>

 

[JJ]

IE doesn't work, but Google Chrome works.  Can you help with IE loading panel?

[Sebastian]

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

[JJ]

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

[JJ]

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! 

[JJ]

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;

 

}

}

[Sebastian]

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

[JJ]

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!

[Sebastian]

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

[JJ]

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>

[Sebastian]

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