Telerik RadPanelLoading issue

2 posts, 0 answers
  1. Avihai
    Avihai avatar
    21 posts
    Member since:
    Aug 2013

    Posted 30 Oct 2013 Link to this post

    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>


     
  2. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 31 Oct 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top