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

RadAjax and UserControl

5 Answers 177 Views

Ajax

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

Ruslan G asked on 26 Oct 2010, 01:05 PM

Hi,

I've a user control , composed of two asp:buttons. I would like only one of the buttons perform partial page update via radajax.
How can I do this (since EventName attribute isn't working)?

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UserControlAndRadAjax._Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Src="~/MyUserButton.ascx" TagPrefix="UC" TagName="MyUserButton" %>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="MyUserControl" EventName="ClickMeClick" >

<UpdatedControls >

<telerik:AjaxUpdatedControl ControlID="CounterLiteralTd"/>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="AjaxifiedClickMeButton" >

<UpdatedControls >

<telerik:AjaxUpdatedControl ControlID="CounterLiteralTd" LoadingPanelID="RadAjaxLoadingPanel1"/>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<div>

<table border="1">

<tr>

<td>

<asp:Button runat="server" ID="AjaxifiedClickMeButton" Text="AjaxifiedClickMe" />

</td>

<td>

<UC:MyUserButton runat="server" ID="MyUserControl" ></UC:MyUserButton>

</td>

</tr>

<tr>

<td colspan="2" >

<asp:Panel style="width:100px;height:100px;" runat="server" ID="CounterLiteralTd">

<asp:Label runat="server" ID="CounterLiteral"></asp:Label>

</asp:Panel>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Default.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Threading;

namespace UserControlAndRadAjax

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

this.MyUserControl.ClickMeClick += new EventHandler(MyUserControl_Click);

this.MyUserControl.ClickAsWellClick += new EventHandler(MyUserControl_Click);

this.AjaxifiedClickMeButton.Click += new EventHandler(MyUserControl_Click);

}

public void MyUserControl_Click(object sender, EventArgs e)

{

Thread.Sleep(500);

if (!string.IsNullOrEmpty(this.CounterLiteral.Text))

{

int currentValue = int.Parse(this.CounterLiteral.Text);

currentValue++;

this.CounterLiteral.Text = currentValue.ToString();

}

else

{

this.CounterLiteral.Text = "0";

}

MyUserButton.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyUserButton.ascx.cs" Inherits="UserControlAndRadAjax.MyUserButton" %>

<asp:Button runat="server" ID="AjaxifiedClickMe" Text="AjaxifiedClickMe" />

<asp:Button runat="server" ID="ClickAsWellButton1" Text="ClickAsWell" />

MyUserButton.ascx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace UserControlAndRadAjax

{

public partial class MyUserButton : System.Web.UI.UserControl

{

public event EventHandler ClickMeClick;

public event EventHandler ClickAsWellClick;

protected void Page_Load(object sender, EventArgs e)

{

this.AjaxifiedClickMe.Click += new EventHandler(ineerButton_Click);

this.ClickAsWellButton1.Click += new EventHandler(ClickAsWellButton1_Click);

}

void ClickAsWellButton1_Click(object sender, EventArgs e)

{

if (this.ClickAsWellClick != null)

{

this.ClickAsWellClick(this, EventArgs.Empty);

}

void ineerButton_Click(object sender, EventArgs e)

{

if (this.ClickMeClick != null)

{

this.ClickMeClick(this, EventArgs.Empty);

}

protected override void Render(HtmlTextWriter writer)

{

writer.Write("<div ");

writer.WriteAttribute("id", this.ClientID);

writer.WriteLine(">");

base.Render(writer);

writer.WriteEndTag("div");

}

5 Answers, 1 is accepted

answered on 26 Oct 2010, 03:09 PM

Hello Ruslan,

I am not sure if I understand your scenario completely. Using RadAjaxManager / RadAjaxManagerProxy you can ajaxify all controls that normally work with postbacks. It allows you to update a number of page elements at once regardless of their position on the page. Review the help article below for more information:
http://www.telerik.com/help/aspnet-ajax/ajxajaxmanager.html

Additionally, I suggest that you examine this help article.

Kind regards,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 26 Oct 2010, 04:29 PM

The userControl consists of two buttons : button1 and button2

I would like to have the following code working:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="button1(fromMyUserControl)" >

<UpdatedControls >

<telerik:AjaxUpdatedControl ControlID="someControl"/>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="button2(fromMyUserControl)" >

<UpdatedControls >

<telerik:AjaxUpdatedControl ControlID="someOthereControl" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

Of course I can't write AjaxControlID="button1(fromMyUserControl)" , as there is no serverside control with such id,
so how do I achieve the desired behavior ? How do I make ajaxManager to monitor the inner controls of userControl ?

10x.

answered on 26 Oct 2010, 04:58 PM

Hi Ruslan,

In case the controls are placed in a WebUserControl we recommend adding AJAX settings programmatically, which approach together with FindControl method usage, provides AJAX Manager with the ability to ajaxify and update controls at all "levels" of the application..

See also how to ajaxify user controls.

Best wishes,

Pavlina
the Telerik team