Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadAjax and UserControl

5 Answers 141 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Ruslan G
Top achievements
Rank 1
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">
  
<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

Sort by
0
Pavlina
Telerik team
answered on 26 Oct 2010, 02:31 PM
Hi Ruslan,

Please refer to the following help topic for more information on this matter.
Exclude controls from ajaxifying

All the best,
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
0
Ruslan G
Top achievements
Rank 1
answered on 26 Oct 2010, 02:40 PM
Thanks for the quick  answer, but that is not exactly what I had in mind.

Is there a way to configure button1 to of usercontrol to update controls x,y,z
and  button2 to of usercontrol to update controls a,b,c via radajax manager/proxy ?

10x.
0
Pavlina
Telerik team
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
0
Ruslan G
Top achievements
Rank 1
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.

0
Pavlina
Telerik team
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

 

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
Tags
Ajax
Asked by
Ruslan G
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Ruslan G
Top achievements
Rank 1
Share this question
or