RadAjax and UserControl

6 posts, 0 answers
  1. Ruslan G
    Ruslan  G avatar
    6 posts
    Member since:
    Oct 2012

    Posted 26 Oct 2010 Link to this post

    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");
            }
      
      
        }
    }


  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 26 Oct 2010 Link to this post

    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
  3. Ruslan G
    Ruslan  G avatar
    6 posts
    Member since:
    Oct 2012

    Posted 26 Oct 2010 Link to this post

    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.
  4. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 26 Oct 2010 Link to this post

    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
  5. Ruslan G
    Ruslan  G avatar
    6 posts
    Member since:
    Oct 2012

    Posted 26 Oct 2010 Link to this post

    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.

  6. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 26 Oct 2010 Link to this post

    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
Back to Top