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

Ajax

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

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

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.

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

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