How to make RadAjaxLoadingPanel show when a button in a RadToolbar is clicked.

6 posts, 0 answers
  1. JR
    JR avatar
    11 posts
    Member since:
    Jul 2012

    Posted 04 Apr 2012 Link to this post

    Hi, I need to display a loading panel whenever I click on any button inside a RadToolbar.  Thanks.

        
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadToolBar1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="divDataEntry" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />
    <div id="divDataEntry" runat="server">
        <telerik:RadTextBox ID="rtbTxtBox" runat="server" Width="10em" MaxLength="20" />
    </div>
        <telerik:RadToolBar ID="RadToolBar1" runat="server" Skin="Office2010Blue" ForeColor="Black"
            OnClientButtonClicked="OnClientButtonClicked" OnClientButtonClicking="OnClientButtonClicking"
            OnButtonClick="RadToolBar1_ButtonClick">
            <Items>
                <telerik:RadToolBarButton runat="server" Owner="RadToolBar1" Text="Add" ForeColor="Black"
                    ImageUrl="~/Telerik/Images/add.gif" CommandName="addcmd" Value="add" />
                <telerik:RadToolBarButton IsSeparator="true" />
                <telerik:RadToolBarButton runat="server" Owner="RadToolBar1" Text="Reset" ForeColor="Black"
                    ImageUrl="~/Telerik/Images/Refresh.gif" CommandName="resetcmd" Value="reset" />
                <telerik:RadToolBarButton IsSeparator="true" />
                <telerik:RadToolBarButton runat="server" Owner="RadToolBar1" Text="Clear" ForeColor="Black"
                    ImageUrl="~/Telerik/Images/Undo.gif" CommandName="clearcmd" Value="clear" />
                <telerik:RadToolBarButton IsSeparator="true" />
                <telerik:RadToolBarButton runat="server" Owner="RadToolBar1" Text="Save" ForeColor="Black"
                    ImageUrl="~/Telerik/Images/Save.gif" CommandName="savecmd" Value="save" ValidationGroup="required" />
            </Items>
        </telerik:RadToolBar>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Apr 2012 Link to this post

    Hi,

    Try the following code Snippet to show RadAjaxLoadingPanel on clicking the RadToolBarButton.

    JS:
    <script type="text/javascript">
       var currentLoadingPanel = null;
       var currentUpdatedControl = null;
       function RequestStart(sender, args)
        {
          currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID%>");
          if (args.get_eventTarget() == "<%= RadToolBar1.UniqueID %>")
           {
              currentUpdatedControl = "divDataEntry";
              currentLoadingPanel.show(currentUpdatedControl);
           }
        }
       function ResponseEnd()
        {
          if (currentLoadingPanel != null)
           {
              currentLoadingPanel.hide(currentUpdatedControl);
           }
          currentUpdatedControl = null;
          currentLoadingPanel = null;
        }
    </script>

    C#:
    protected void RadToolBar1_ButtonClick(object sender, Telerik.Web.UI.RadToolBarEventArgs e)
        {
            System.Threading.Thread.Sleep(500);
        }

    Thanks,
    Princy.
  3. JR
    JR avatar
    11 posts
    Member since:
    Jul 2012

    Posted 10 Apr 2012 Link to this post

    How are the functions RequestStart and RequestEnd invoked?  Thanks.
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Apr 2012 Link to this post

    Hello,

    You can hook the Client events as shown below.
    aspx:
    <telerik:RadAjaxManager ClientEvents-OnResponseEnd="ResponseEnd" ClientEvents-OnRequestStart="RequestStart" ID="ajax" runat="server">
     <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadToolBar1">
             <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="divDataEntry" />
             </UpdatedControls>
        </telerik:AjaxSetting>
     </AjaxSettings>
    </telerik:RadAjaxManager>

    Thanks,
    Princy.
  5. JR
    JR avatar
    11 posts
    Member since:
    Jul 2012

    Posted 16 Apr 2012 Link to this post

    Hi, 

    I tried your suggestion but loading panel still doesn't show.
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Apr 2012 Link to this post

    Hello,

    Following is the code that i tried to show RadAjaxLoadingPanel on clicking the RadToolBarButton.

    ASPX:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="lodingpanel.aspx.cs" Inherits="radtoolbar_lodingpanel" %>
    <%@ 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">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadAjaxManager ClientEvents-OnResponseEnd="ResponseEnd" ClientEvents-OnRequestStart="RequestStart" ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadToolBar1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="divDataEntry" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />
            <div id="divDataEntry" runat="server">
                <telerik:RadTextBox ID="rtbTxtBox" runat="server" Width="10em" MaxLength="20" />
            </div>
            <telerik:RadToolBar ID="RadToolBar1" runat="server" Skin="Office2010Blue" ForeColor="Black" OnButtonClick="RadToolBar1_ButtonClick">
                <Items>
                    <telerik:RadToolBarButton runat="server" Owner="RadToolBar1" Text="Add" ForeColor="Black" CommandName="addcmd" Value="add" />
                    <telerik:RadToolBarButton IsSeparator="true" />
                    <telerik:RadToolBarButton runat="server" Owner="RadToolBar1" Text="Reset" ForeColor="Black" CommandName="resetcmd" Value="reset" />
                    <telerik:RadToolBarButton IsSeparator="true" />
                    <telerik:RadToolBarButton runat="server" Owner="RadToolBar1" Text="Clear" ForeColor="Black" CommandName="clearcmd" Value="clear" />
                    <telerik:RadToolBarButton IsSeparator="true" />
                    <telerik:RadToolBarButton runat="server" Owner="RadToolBar1" Text="Save" ForeColor="Black" CommandName="savecmd" Value="save" ValidationGroup="required" />
                </Items>
            </telerik:RadToolBar>
        </div>
        </form>
    </body>
    </html>

    JS:
    <script type="text/javascript">
        var currentLoadingPanel = null;
        var currentUpdatedControl = null;
        var value = null;
        function RequestStart(sender, args)
        {
            currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID%>");
            if (args.get_eventTarget() == "<%= RadToolBar1.UniqueID %>")
            {
                currentUpdatedControl = "divDataEntry";
                currentLoadingPanel.show(currentUpdatedControl);
            }
        }
        function ResponseEnd()
        {
            if (currentLoadingPanel != null)
            {
                currentLoadingPanel.hide(currentUpdatedControl);
            }
            currentUpdatedControl = null;
            currentLoadingPanel = null;
        }
    </script>

    C#:
    public partial class radtoolbar_lodingpanel : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
        protected void RadToolBar1_ButtonClick(object sender, Telerik.Web.UI.RadToolBarEventArgs e)
        {
            System.Threading.Thread.Sleep(500);
        }
    }

    Hope this helps.

    Thanks,
    Shinu.
Back to Top