This is a migrated thread and some comments may be shown as answers.

Telerik RadPanelLoading issue

1 Answer 37 Views

Documentation and Tutorials

This is a migrated thread and some comments may be shown as answers.

Avihai asked on 30 Oct 2013, 06:56 PM

Hi all,

I need urgently help : I'm trying to add Rad panel loading that when I click on the save button it will show on the screen spinning image for couple of sec because I have a lot of data to load so please help me and show how to do it.

This is my Code:

function MyClientShowing(sender, eventArgs) {

eventArgs.get_loadingElement().style.border = "2px solid #000000";

eventArgs.set_cancelNativeDisplay(true);

$telerik.$(eventArgs.get_loadingElement()).show("slow");

}

function MyClientHiding(sender, eventArgs) {

eventArgs.get_loadingElement().style.border = "2px solid #000000";

eventArgs.set_cancelNativeDisplay(true);

$telerik.$(eventArgs.get_loadingElement()).hide("slow");

}

function saveUserNotification_Clicked(sender, eventArgs) {

var l_saveUserInfo = $find("<%=saveUserInfo.ClientID %>");

l_saveUserInfo.style.visibility = 'none';

}

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="LeftContent" runat="server">

</div>

<table>

<tr>

</tr>

</table>

</div>

</asp:Content>

<asp:Content ID="cphRight" ContentPlaceHolderID="RightContent" runat="server">

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackColor="gray" Transparency="30"

OnClientShowing="MyClientShowing" OnClientHiding="MyClientHiding">

<span style="background-color:#FFFFFF; margin-top:30px;">Saving Plese Wait...</span>

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<telerik:AjaxSetting AjaxControlID="Panel1">

<telerik:AjaxUpdatedControl ControlID="Panel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

</div>

<asp:Image ID="imgBack" runat="server" ImageUrl="~/Images/GoBack.png" />

<asp:LinkButton ID="lbToLocalAdmin" runat="server" Text="Go Back" OnClick="Cancel_Click" Visible="true" ></asp:LinkButton>

</div>

<asp:Panel ID="Panel1" runat="server" Width="930px" Height="492px" BorderStyle="None">

<tr>

Automated Notification

</td>

</tr>

<tr>

Editing User:

</td>

<asp:Label ID="lblName" runat="server" ></asp:Label>

</td>

</tr>

<tr>

Notification by:

</td>

Email<asp:CheckBox ID="cbByEmail" runat="server" Checked="False"/>  

SMS<asp:CheckBox ID="cbBySMS" runat="server" Checked="False"/>

</td>

</tr>

<tr>

<td class="GeneralFontShape" style="text-align: left; vertical-align:top;">Categories:<span class="validationClass">*</span>

<div>Total Selected: <asp:Label ID="lblTotal" runat="server"></asp:Label> </div></td>

<telerik:RadListBox ID = "rlbCategories" CheckBoxes="true" Width="290px" Height="170px"

AllowTransfer="true"

OnClientItemChecked="ShowTotalCheckedListbox"

OnTransferring="rlbCategories_Transferring"

AutoPostBackOnTransfer="true"

OnClientCheckAllChecked="ShowTotalCheckedListbox"

TransferToID=""

ShowCheckAll="true"

runat="server" >

</telerik:RadListBox>

</td>

</tr>

<tr>

</td>

<telerik:RadButton ID="saveUserInfo" ValidationGroup="validateEditUser" OnClick="saveUserNotification_Click" OnClientClicked="saveUserNotification_Clicked" Width="70px" runat="server" Text="Save">

</telerik:RadButton>

<telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" Width="70px" OnClick="Cancel_Click">

</telerik:RadButton>

</td>

</tr>

</table>

<asp:Label ID="lblErrorMessage" runat="server" ></asp:Label>

</div>

<asp:Label ID="lblMessage" runat="server" ></asp:Label>  

<asp:LinkButton ID="lbGoBack" runat="server" OnClick="Cancel_Click"><- Go Back</asp:LinkButton>

</div>

<tr>

Personal Notification - Phone

</td>

</tr>

<tr>

Editing User:

</td>

<asp:Label ID="lblNamePhone" runat="server" ></asp:Label>

</td>

</tr>

<tr>

User Type:

</td>

<telerik:RadComboBox ID="rcbUserType" EmptyMessage="Select User Type" runat="server" AutoPostBack="True" OnClientSelectedIndexChanged="UserTypeChangeAlert" OnSelectedIndexChanged="UserTypeChangeAlert_SelectedIndexChanged"></telerik:RadComboBox>

</td>

</tr>

<tr>

<td class="GeneralFontShape" style="text-align: left; vertical-align:top;">Categories:<span class="validationClass">*</span>

<div>Total Selected: <asp:Label ID="lblTotalPhone" runat="server"></asp:Label> </div></td>

<telerik:RadListBox ID = "rlbCategoriesPhone" CheckBoxes="true" Width="290px" Height="170px"

AllowTransfer="False"

OnClientItemChecked="ShowTotalCheckedListbox"

AutoPostBackOnTransfer="False"

OnClientCheckAllChecked="ShowTotalCheckedListbox"

ShowCheckAll="true"

runat="server" >

</telerik:RadListBox>

</td>

</tr>

</asp:Panel>

</table>

</div>

1 Answer, 1 is accepted

answered on 31 Oct 2013, 04:33 PM

RadAjaxSampleAvihai.zip

Hi Avihai,

I have prepared a sample RadGrid web site to demonstrate how you can achieve the requested functionality. Please run the attached application and let me know if it helps you.

In addition, you can refer to the following article and various grid demos for a practical implementation:
http://www.telerik.com/help/aspnet-ajax/ajax-masterpage.html

Regards,
Eyup
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Telerik RadPanelLoading issue

1 Answer, 1 is accepted