how to show radajax loading panel on asp button click event

[Manaswinee]

Hello,
        I want to show the ajaxloadingpanel on my asp button click event. The asp button is present outside the grid.The grid is ajaxified by using radajaxmanager.Kindly help me out.

Best Regards,
Manaswinee

[Shinu]

Hello Manaswinee,


I hope the following links will be of help.
Ajax / Explicit Show/Hide
Documentation: Show and hide loading panel explicitly



-Shinu.

[Manaswinee]

Hello,
       Thanks a lot for your response.I have already gone through the sites. I did the respective changes. But on clicking the asp button I am getting ''nul" ia null or not an object error. For your info. the asp button is outside the radgrid.And the grid is getting ajaxified through radAjaxmanager.

[Manaswinee]

Hello,
     Below is the code in my aspx page.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<telerik:radajaxmanager ID="RadAjaxMgriPur" runat="server">
<ClientEvents OnRequestStart="onRequestStart" OnResponseEnd="ResponseEnd"/>
<ajaxsettings>
<telerik:AjaxSetting AjaxControlID="RGridImportedData">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RGridImportedData" LoadingPanelID="RadAjaxLoadingPaneliPur"/>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="btnUpload">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RGridImportedData" LoadingPanelID="RadAjaxLoadingPaneliPur" />
</UpdatedControls>
</telerik:AjaxSetting>
</ajaxsettings>
</telerik:radajaxmanager>
<telerik:radajaxloadingpanel ID="RadAjaxLoadingPaneliPur" runat="server" Skin="Forest">
</telerik:radajaxloadingpanel>
<br />
<asp:Label ID="Label1" runat="server" Font-Names="Arial" Font-Size="Small" ForeColor="#006600">Select File to import:</asp:Label>
<br />
<telerik:RadUpload ID="RadUpload1" runat="server" ControlObjectsVisibility="None"
FocusOnLoad="True" Height="27px" InputSize="50" Skin="Forest" Width="378px" InitialFileInputsCount="1"
AllowedFileExtensions=".xls" OnFileExists="RadUpload1_FileExists">
</telerik:RadUpload>
<asp:Label ID="labelNoResults" runat="server" Font-Names="Arial" Font-Size="Small"
ForeColor="Red">No uploaded files yet.</asp:Label>
<asp:Repeater ID="repeaterResults" runat="server" Visible="False">
<HeaderTemplate>
<div class="title">
Uploaded files in the target folder:</div>
</HeaderTemplate>
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "FileName")%>
<%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
<br />
</ItemTemplate>
</asp:Repeater>
<br />
<table>
<tr>
<td>
<asp:Button ID="btnUpload" runat="server" Height="25px" Text="Upload, Validate and View"
CssClass="ButtonStyle" OnClick="btnUpload_Click" />
<asp:CustomValidator ID="customValidatorUpload" runat="server" Display="Dynamic"
ClientValidationFunction="validateRadUpload1">
<span style="FONT-SIZE: 12px;">Invalid extensions.</span>
</asp:CustomValidator>
</td>
<td>
<asp:Panel runat="server" ID="pnlMessage" ForeColor="Red">
<%= _errorMsg%>
</asp:Panel>
<asp:Label ID="lblErrMsg" runat="server" ></asp:Label>
</td>
</tr>
</table>
<br /> 
 
<telerik:RadGrid ID="RGridImportedData" runat="server" Skin="Forest" AllowPaging="True"
AutoGenerateColumns="False"
OnNeedDataSource="RGridImportedData_NeedDataSource" PageSize="50"
GridLines="None" OnItemDataBound="RGridImportedData_ItemDataBound" OnUpdateCommand="RGridImportedData_UpdateCommand"
OnDeleteCommand="RGridImportedData_DeleteCommand"
onitemcreated="RGridImportedData_ItemCreated"
onitemcommand="RGridImportedData_ItemCommand"
onexcelexportcellformatting="RGridImportedData_ExcelExportCellFormatting"
onpagesizechanged="RGridImportedData_PageSizeChanged"
onprerender="RGridImportedData_PreRender"
ongridexporting="RGridImportedData_GridExporting">
<mastertableview commanditemdisplay="Top" editmode="InPlace" datakeynames="OrderId"
tablelayout="Auto">
<PagerStyle AlwaysVisible="true"/>
<CommandItemSettings ShowExportToExcelButton="true" />
<Columns>
--------------------------------------------
</columns>
</mastertableview>
</telerik:RadGrid>
 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
 
<script type="text/javascript">

var currentLoadingPanel = null;
var currentUpdatedControl = null;
function validateRadUpload1(source, arguments)
{
arguments.IsValid = getRadUpload('<%# RadUpload1.ClientID %>').validateExtensions();
}
function onRequestStart(sender, args)
{
if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0)
{
args.set_enableAjax(false);
}
currentLoadingPanel = $find("<%= RadAjaxLoadingPaneliPur.ClientID %>");
if (args.get_eventTarget() == "<%= btnUpload.UniqueID %>")
{
currentUpdatedControl = "<%= RGridImportedData.ClientID %>";
}
else
{
currentUpdatedControl = "<%= RGridImportedData.ClientID %>";
}
//show the loading panel over the updated control
currentLoadingPanel.show(currentUpdatedControl);
}

 

function ResponseEnd()
{
//hide the loading panel and clean up the global variables
if (currentLoadingPanel != null)
currentLoadingPanel.hide(currentUpdatedControl);
currentUpdatedControl = null;
currentLoadingPanel = null;
}
</script>
</telerik:RadCodeBlock>
</asp:Content>

[Tsvetina]

Hi Manaswinee,

Could you please debug your javascript and let us know which line exactly throws the javascript error? Also, I see you are implementing this functionality with an RadAjaxManager in a content page - are there any other AJAX controls on the master page and how are they used/situated?

Best wishes,
Tsvetina
the Telerik team