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

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

5 Answers 679 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
JR
Top achievements
Rank 2
JR asked on 04 Apr 2012, 07:15 AM
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>

5 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 04 Apr 2012, 02:53 PM
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.
0
JR
Top achievements
Rank 2
answered on 10 Apr 2012, 08:09 AM
How are the functions RequestStart and RequestEnd invoked?  Thanks.
0
Princy
Top achievements
Rank 2
answered on 10 Apr 2012, 08:29 AM
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.
0
JR
Top achievements
Rank 2
answered on 16 Apr 2012, 08:26 AM
Hi, 

I tried your suggestion but loading panel still doesn't show.
0
Shinu
Top achievements
Rank 2
answered on 17 Apr 2012, 07:22 AM
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.
Tags
Ajax
Asked by
JR
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
JR
Top achievements
Rank 2
Shinu
Top achievements
Rank 2
Share this question
or