Telerik Forums / UI for ASP.NET AJAX Forum / Ajax /

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

Telerik UI for ASP.NET AJAX
Resources Buy Try

6 posts, 0 answers

JR

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

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

11 posts

Member since:
Jul 2012

Posted 10 Apr 2012 Link to this post

How are the functions RequestStart and RequestEnd invoked? Thanks.
Princy

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

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

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

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

JR

Princy

JR

Princy

JR

Shinu