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

Telerik RadPanelLoading issue

1 Answer 19 Views
Documentation and Tutorials
This is a migrated thread and some comments may be shown as answers.
Avihai
Top achievements
Rank 1
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 class="elementHeader">

<span class="text"> <asp:Label ID="lblFilter" runat="server" Text=""></asp:Label></span>

</div>

<div id="filterWrapperDiv" runat="server" clientidmode="Static">

<div style=" border:0px solid red; padding:20px 0px 0px 10px">

<table>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

</div>

</div>

<div class="elementFooter"></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">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="Panel1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Panel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

<div class="form shadow" style="margin-left: auto; margin-right: auto; height:100%;">

<div class="elementHeader">

<span class="text"> <asp:Label ID="PageTitle" runat="server" Text="EDIT USER NOTIFICATION"></asp:Label></span>

</div>

<div id="gridWrapperDiv" runat="server" clientidmode="Static">

<div id="reportFieldsDiv" runat="server" clientidmode="Static">

<div class="GeneralFontShape">

<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">

<div style="float:left;width:455px; height: 100%; text-align: left; border: 0px solid red;">

<table style="width:435px; margin: 10px 0px 0px 10px; border:1px solid #CCCCCC">

<tr>

<td valign="top" colspan="2" class="GeneralFontShape" style="text-align:left; color:#CCCCCC;">

Automated Notification

</td>

</tr>

<tr>

<td valign="top" class="GeneralFontShape" style="text-align:left; width: 120px">

Editing User:

</td>

<td class="GeneralFontShape" style="text-align: left; width: 300px">

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

</td>

</tr>

<tr>

<td valign="top" class="GeneralFontShape" style="text-align:left; width: 120px">

Notification by:

</td>

<td class="GeneralFontShape" style="text-align: left; width: 300px">

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

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>

<td style="text-align: left">

<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" >

<ButtonSettings TransferButtons="TransferAllFrom" AreaHeight="30" Position="Right" HorizontalAlign="Center" />

</telerik:RadListBox>

</td>

</tr>

<tr>

<td class="style16" valign="bottom">

</td>

<td class="style17" valign="bottom">

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

<Icon PrimaryIconCssClass="rbSave" PrimaryIconLeft="4" PrimaryIconTop="4" />

</telerik:RadButton>

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

<Icon PrimaryIconCssClass="RadListBox1" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>

</telerik:RadButton>

</td>

</tr>

</table>

<div id ="divErrorMessage" class="divErrorMessage" runat="server" visible = "False" clientidmode="Static">

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

</div>

<div id ="divMessage" runat="server" class="divMessage" visible="False" clientidmode="Static">

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

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

</div>

</div>

<div style="float:right; width:470px; height: 100%; text-align: left; border: 0px solid red;">

<table style="width:435px; margin: 10px 0px 0px 0px; border:1px solid #CCCCCC">

<tr>

<td valign="top" colspan="2" class="GeneralFontShape" style="text-align:left; color:#CCCCCC;">

Personal Notification - Phone

</td>

</tr>

<tr>

<td valign="top" class="GeneralFontShape" style="text-align:left; width: 120px">

Editing User:

</td>

<td class="GeneralFontShape" style="text-align: left; width: 300px">

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

</td>

</tr>

<tr>

<td valign="top" class="GeneralFontShape" style="text-align:left; width: 120px">

User Type:

</td>

<td class="GeneralFontShape" style="text-align: left; width: 300px">

<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>

<td style="text-align: left; padding-bottom: 35px">

<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>

</div>

</div>

</div>


 

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 31 Oct 2013, 04:33 PM
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.
Tags
Documentation and Tutorials
Asked by
Avihai
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or