RadInputManager on a Composite Control

[Ravi]

Hello,
I have faced javascript issue in using RadInputManger on a composite control. The composite control having RadInputManager is used in custom user control. This custom user control is loaded in RadMultiPage where this causes javascript error (($find(‘”)… eval(disposescript[i])) )in ajax function below. Error occurs in line in bold below.

-------------------------
_updatePanel: function PageRequestManager$_updatePanel(updatePanelElement, rendering) {

for (var updatePanelID in this._scriptDisposes) {

 if (this._elementContains(updatePanelElement, document.getElementById(updatePanelID))) {

 var disposeScripts = this._scriptDisposes[updatePanelID];

 for (var i = 0, l = disposeScripts.length; i < l; i++) {

window.eval(disposeScripts[i]);

}

delete this._scriptDisposes[updatePanelID];

 }

}
-----------------------
If I remove use of RadInputManager from composite control, issue doesnt get produce. The error can be seen in Firebug in FF and IE developer in IE.

Thanks in advance,
Ravi

[Vasil]

Hi Ravi,

Could you try elaborate the problem a bit more. I see that you are using some Ajax. Is the problem happens without update panels?
I tried to replicate the issue using a sample project that I made but with no success. I am not getting any error here and it is working as expected. Could you check the attachment and tell us what is different in your case?

Regards,
Vasil
the Telerik team

[Ravi]

Thanks for the reply!

Your sample matches our scenario except few things which i, here, am describing and provided code in block below to explain my scenario.

'MyCompositeControl' composite control is an ajax control containing textbox and RadinputManager and references js file. 
'WebUserControl1' user control has composite control.
Default page has another composite control 'MultiPageView' responsible for loading user controls. This page also contains 'NavigationBar' control responsible for generating tabstrip control in the page. 'NavigationBar' control is associated with the 'MultipageView' control. 'NavigationBar' control has XmlDatasource having two layer tabs and tabs are associated with usercontrol which are loaded by 'MultPageView' control in the page.

Now scenario is:  I have two tabs. In one tab, usercontrol is loaded containing checkbox and causes postback and in another tab, a usercontrol containing TextEditorControl and a button causing postback. When postback is performed either by checkbox or button from under tabs multiple times then javascript issue is thrown as described earlier.

 Code snippet for MultiPageView.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using System.Web.UI;
using System.Web.UI.WebControls;

using Telerik.Web;
using Telerik.Web.UI;

namespace CustomControls
{
    #region class MultiPageView
    public class MultiPageView : CompositeControlBase
    {
        #region Variables
        protected RadMultiPage _radMultiPage;
        private string _navigationbarID;
        private NavigationBar nb = null;
        private RadAjaxLoadingPanel _loadingPanel = null;
        #endregion


        #region Properties
        public string NavigatioBarID
        {
            get
            {
                return _navigationbarID;
            }
            set
            {
                _navigationbarID = value;
            }
        }
        #endregion

        #region Methods
        protected override HtmlTextWriterTag TagKey
        {
            get
            {
                return HtmlTextWriterTag.Div;
            }
        }

        protected override void CreateChildControls()
        {
            base.CreateChildControls();

            _loadingPanel = new RadAjaxLoadingPanel();
            _loadingPanel.ID = "_loadingPanel1";
            _loadingPanel.EnableEmbeddedSkins = false;
            _loadingPanel.EnableEmbeddedBaseStylesheet = false;
            _loadingPanel.Skin = RuntimeSkin;


            Controls.Add(_loadingPanel);


            _radMultiPage = new RadMultiPage();
            _radMultiPage.ID = this.ID + "_rmp";
            _radMultiPage.CssClass = "MultiPage";
            _radMultiPage.EnableEmbeddedSkins = false;
            _radMultiPage.EnableEmbeddedBaseStylesheet = false;
            _radMultiPage.PageViewCreated += new RadMultiPageEventHandler(radMultiPage_PageViewCreated);

            nb = FindNavigationBar();

            Controls.Add(_radMultiPage);

        }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            RadAjaxManager ajaxManager = RadAjaxManager.GetCurrent(Page);

            if (ajaxManager != null)
            {
                ajaxManager.AjaxSettings.AddAjaxSetting(this, this);
                ajaxManager.AjaxSettings.AddAjaxSetting(this, nb);
                ajaxManager.AjaxSettings.AddAjaxSetting(this, _radMultiPage, _loadingPanel);

                //RadTabStrip
                ajaxManager.AjaxSettings.AddAjaxSetting(nb, nb);
                ajaxManager.AjaxSettings.AddAjaxSetting(nb, _radMultiPage, _loadingPanel);

                //MultiPage
                ajaxManager.AjaxSettings.AddAjaxSetting(_radMultiPage, _radMultiPage, _loadingPanel);
            }
        }

        void radMultiPage_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            RadAjaxManager ajaxManager = RadAjaxManager.GetCurrent(Page);
            //RadAjaxLoadingPanel radAjaxLoadingPanel;
            string usercontrolpath = string.Empty;

            nb.UserControList.TryGetValue(e.PageView.ID, out usercontrolpath);

            e.PageView.CssClass = "RadPageViewContent";

            try
            {
                if (usercontrolpath.Contains(".aspx"))
                {
                    e.PageView.ContentUrl = usercontrolpath;
                    e.PageView.Height = Unit.Pixel(400);
                }
                else
                {

                    Control userControl = Page.LoadControl(usercontrolpath);
                    userControl.ID = usercontrolpath.Substring(userControl.AppRelativeTemplateSourceDirectory.Length, usercontrolpath.Length - userControl.AppRelativeTemplateSourceDirectory.Length).Replace(".", "_");
                    //userControl.ID = e.PageView.ID + "_userControl";
                    e.PageView.Controls.Add(userControl);

                    if (ajaxManager != null)
                    {
                        ajaxManager.AjaxSettings.AddAjaxSetting(userControl, this, _loadingPanel);
                    }
                }
            }
            catch (Exception ex)
            {

                Control userControl = Page.LoadControl("~/HostControl.ascx");
                userControl.ID = e.PageView.ID + "_userControl";

                e.PageView.Controls.Add(userControl);

                //((Label)userControl.FindControl("contentLabel")).Text = "Content for " + e.PageView.ID;
                ((Label)userControl.Controls[3].Controls[1]).Text = "Content for " + e.PageView.ID;

                if (ajaxManager != null)
                {
                    ajaxManager.AjaxSettings.AddAjaxSetting(userControl, this, _loadingPanel);
                }
            }
        }

        protected NavigationBar FindNavigationBar()
        {
            NavigationBar nb = null;
            if (NavigatioBarID != null)
            {
                nb = (NavigationBar)this.NamingContainer.FindControl(NavigatioBarID);
                if (nb == null)
                {
                    nb = (NavigationBar)this.Page.FindControl(NavigatioBarID);
                }
            }
            return nb;
        }
        #endregion
    }
    #endregion
}

MyCompositeControl.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

[assembly: WebResource("MyCompositeControl.TextEditor.js", "text/javascript")]
namespace CustomControls
{
    [ScriptReference("MyCompositeControl.TextEditor.js", "MyCompositeControlAssembly")]
    public class TextEditor : EditorBase
    {

        #region Private variables
        private RequiredFieldValidator _requireFieldValidator;
        private TextBox _textBox;
        private RadInputManager _textInputManager;
        private RadFormDecorator _radformDec;
        private TextBoxSetting textBoxValidator;
        private Control _editorContainer;
        private Control _validationContainer;
        private Control _lableContainer;
        private string _errorMessage;
        private Label _textLabel;
        //private string _skin = string.Empty;
        private string _validationGroup = string.Empty;
        //private RequiredFieldValidator _requiredValidator;
        private string _requiredErrorMessageFormat;
        //  private RegularExpressionValidator _regularExpressionValidator;
        private string _regularExpressionErrorMessageFormat;

        private static readonly object _eventTextChanged;

        #endregion

        #region Public Properties

        public string ErrorMessage
        {
            get
            {
                return _errorMessage;
            }
            set
            {
                _errorMessage = value;
            }
        }

        /// <summary>
        /// Gets or sets the text box.
        /// </summary>
        /// <value>The text box.</value>
        [Browsable(false)]
        public TextBox TextBox
        {
            get
            {
                return (_textBox);
            }
            set
            {
                _textBox = value;
            }
        }

        /// <summary>
        /// Gets or sets auto post back.
        /// </summary>
        public bool AutoPostBack
        {
            get
            {
                EnsureChildControls();
                return (_textBox.AutoPostBack);
            }
            set
            {
                EnsureChildControls();
                _textBox.AutoPostBack = value;
            }
        }


        public string ValidationGroup
        {
            get
            {
                EnsureChildControls();
                return (_textBox.ValidationGroup);
            }
            set
            {
                EnsureChildControls();
                _textBox.ValidationGroup = value;
                _requireFieldValidator.ValidationGroup = value;
            }
        }
        /// <summary>
        /// Gets or sets the text.
        /// </summary>
        /// <value>The text.</value>
        public string Text
        {
            get
            {
                EnsureChildControls();
                return (_textBox.Text);
            }
            set
            {
                EnsureChildControls();
                _textBox.Text = value;
            }
        }

        /// <summary>
        /// TextChanged
        /// </summary>
        public event EventHandler TextChanged
        {
            add
            {
                base.Events.AddHandler(_eventTextChanged, value);
            }
            remove
            {
                base.Events.RemoveHandler(_eventTextChanged, value);
            }
        }
        /// <summary>
        /// Gets or sets the text box number of rows.
        /// </summary>
        /// <value>Integer number of rows.</value>
        public int Rows
        {
            get
            {
                EnsureChildControls();
                return (_textBox.Rows);
            }
            set
            {
                EnsureChildControls();
                _textBox.Rows = value;
            }
        }

        /// <summary>
        /// Gets or sets the text mode.
        /// </summary>
        /// <value>System.Web.UI.WebControls.TextBoxMode</value>
        public TextBoxMode TextMode
        {
            get
            {
                EnsureChildControls();
                return (_textBox.TextMode);
            }
            set
            {
                EnsureChildControls();
                _textBox.TextMode = value;
            }
        }

        /// <summary>
        /// Gets or sets read only property for text box.
        /// </summary>
        /// <value>boolean</value>
        public bool ReadOnly
        {
            get
            {
                EnsureChildControls();
                return (_textBox.ReadOnly);
            }
            set
            {
                EnsureChildControls();
                _textBox.ReadOnly = value;
            }
        }

        /// <summary>
        /// Gets or sets width
        /// </summary>
        public new Unit Width
        {
            get
            {
                EnsureChildControls();
                return _textBox.Width;
            }
            set
            {
                EnsureChildControls();
                _textBox.Width = value;
            }
        }

        /// <summary>
        /// Gets or sets max length.
        /// </summary>
        public int MaxLength
        {
            get
            {
                EnsureChildControls();
                return _textBox.MaxLength;
            }
            set
            {
                EnsureChildControls();
                _textBox.MaxLength = value;
            }
        }
        /// <summary>
        /// Gets or sets regular expression error message format
        /// </summary>
        public string RegularExpressionErrorMessageFormat
        {
            get
            {
                return _regularExpressionErrorMessageFormat;
            }
            set
            {
                _regularExpressionErrorMessageFormat = value;
            }
        }

        /// <summary>
        /// Gets or sets regular error message format
        /// </summary>
        public string RequiredErrorMessageFormat
        {
            get
            {
                return _requiredErrorMessageFormat;
            }
            set
            {
                _requiredErrorMessageFormat = value;
            }
        }

        ///// <summary>
        ///// Gets or sets regular expression
        ///// </summary>
        //public string RegularExpression
        //{
        //    get
        //    {
        //        EnsureChildControls();
        //        return _regularExpressionValidator.ValidationExpression;
        //    }
        //    set
        //    {
        //        EnsureChildControls();
        //        _regularExpressionValidator.ValidationExpression = value;
        //        _regularExpressionValidator.Visible = !String.IsNullOrEmpty(_regularExpressionValidator.ValidationExpression);
        //    }
        //}

        /// <summary>
        /// Gets validation container
        /// </summary>
        protected virtual Control ValidatorContainer
        {
            get
            {
                return _validationContainer;
            }
        }

        protected virtual RadInputManager InputManager
        {
            get
            {
                return _textInputManager;
            }
        }

        /// <summary>
        /// Gets the related control label.
        /// </summary>
        /// <returns></returns>
        protected string GetRelatedControlLabel()
        {
            string returnValue = "";

            if (_textLabel != null)
            {
                returnValue = Label;
            }

            return (returnValue);
        }

        private string GetRequiredErrorMessage()
        {
            string requiredErrorMessage = "*";
            if (_textLabel != null)
            {
                string labelName = Label;
                string format = _errorMessage;
                if (format == null) format = GetDefaultRequiredErrorMessageFormat();
                requiredErrorMessage = String.Format(format, labelName);
            }
            else
            {
                string format = _errorMessage;
                if (format == null) format = GetDefaultRequiredErrorMessageFormat();
                requiredErrorMessage = format;
            }
            return requiredErrorMessage;
        }

        protected string GetDefaultRequiredErrorMessageFormat()
        {
            string label = Label;
            string format;

            if (String.IsNullOrEmpty(label))
            {
                format = "Please enter a valid field value.";
            }
            else
            {
                format = "Please enter a valid '{0}'.";
            }

            return format;
        }

        #endregion

        #region Event

        static TextEditor()
        {
            _eventTextChanged = new object();

        }

        /// <summary>
        /// AddParsedSubObject
        /// </summary>
        /// <param name="obj">object</param>
        protected override void AddParsedSubObject(object obj)
        {
            LiteralControl lt = obj as LiteralControl;

            if (lt != null)
            {
                this.Text = ((LiteralControl)obj).Text;
            }
            else
            {
                base.AddParsedSubObject(obj);
            }
        }


        protected override void CreateChildControls()
        {

            base.CreateChildControls();

            _table = new Table();
            _table.BorderWidth = 0;
            _table.CellPadding = 0;
            _table.CellSpacing = 0;
            _table.Attributes.Add("style", "display: inline;");
            _table.Rows.Add(new TableRow());


            Controls.Add(_table);

            _table.Rows.Add(new TableRow());
            _table.Rows[1].Height = Unit.Pixel(16);
            if (Label != null)
            {
                CreateLabelContainer();
            }
            CreateEditorContainer();



             _radformDec = new RadFormDecorator();
             _radformDec.ID = "radDec";
             _radformDec.EnableEmbeddedSkins = false;
             _radformDec.EnableEmbeddedBaseStylesheet = false;
             _radformDec.EnableRoundedCorners = true;
            _radformDec.RegisterWithScriptManager=false;
            //_radformDec.Skin = Skin;

            _editorContainer.Controls.Add(_radformDec);

            _validationContainer = CreateValidatorContainerPart();

            CreateInputManagerPart();
            _validationContainer.Controls.Add(_textInputManager);
            _validationContainer.Controls.Add(_requireFieldValidator);
        }

        protected void CreateInputManagerPart()
        {
            _textInputManager = new RadInputManager();
            _textInputManager.EnableEmbeddedSkins = false;
            _textInputManager.EnableEmbeddedBaseStylesheet = false;
            _textInputManager.RegisterWithScriptManager = false;
            _textInputManager.ID = "rdi1";
        }
        /// <summary>
        /// Function to create editor container
        /// </summary>
        protected override void CreateEditorContainer()
        {
            base.CreateEditorContainer();

            _editorContainer = CreateEditorContainerPart();

            _textBox = new TextBox();
            //_textBox.CausesValidation = true;

            _textBox.ID = "textBox";
            _textBox.Height = Unit.Pixel(18);
            _textBox.TextChanged += new EventHandler(_textBox_TextChanged);
            _textBox.Width = Width;
            RegisterEditor(_textBox);

            _editorContainer.Controls.Add(_textBox);

            _requireFieldValidator = new RequiredFieldValidator();
            _requireFieldValidator.Text = ErrorMessage;
            _requireFieldValidator.ControlToValidate = _textBox.ID;
            _requireFieldValidator.CssClass = "Validator";

        }

        protected override void CreateLabelContainer()
        {
            base.CreateLabelContainer();

            _lableContainer = CreateLabelContainerPart();
            _textLabel = new Label();
            _textLabel.CssClass = "TextEditorLabel";
            _textLabel.Text = Label;
            _lableContainer.Controls.Add(_textLabel);

        }

        protected void _textBox_TextChanged(object sender, EventArgs e)
        {
            OnTextChanged(e);
        }

        /// <summary>
        /// OnTextChanged
        /// </summary>
        /// <param name="e">EventArgs</param>
        protected void OnTextChanged(EventArgs e)
        {
            EventHandler textChangedHandler = (EventHandler)base.Events[_eventTextChanged];
            if (textChangedHandler != null)
            {
                textChangedHandler(this, e);
            }
        }

        /// <summary>
        /// Pre render event
        /// </summary>
        /// <param name="e">EventArgs</param>
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            _radformDec.DecorationZoneID = _table.ClientID;
            _radformDec.Skin = RuntimeSkin;
            _textInputManager.Skin = RuntimeSkin;

            //_requireFieldValidator.ErrorMessage = GetRequiredErrorMessage();
            _requireFieldValidator.Text = GetRequiredErrorMessage();

            if (Required)
            {
                textBoxValidator = new TextBoxSetting();
                textBoxValidator.Validation.IsRequired = true;
                textBoxValidator.TargetControls.Add(new TargetInput(_textBox.ID, true));
                textBoxValidator.Validation.ValidationGroup = _textBox.ValidationGroup;
                textBoxValidator.InitializeOnClient = false;

                _textInputManager.InputSettings.Clear();
                _textInputManager.InputSettings.Add(textBoxValidator);
                //_requireFieldValidator.Visible = true;

            }
        }

        /// <summary>
        ///
        /// </summary>
        /// <returns></returns>
        public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
        {
            ScriptControlDescriptor descriptor = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);
            return new ScriptDescriptor[] { descriptor };
        }

        #endregion
    }

}

TextEditor.js

/////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////
//START
/////////////////////////////////////////////////////////////////////////////////////////////////////////

Type.registerNamespace("CustomControls");


/////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////
//TextEditor
/////////////////////////////////////////////////////////////////////////////////////////////////////////

CustomControls.TextEditor = function (element) {
    CustomControls.TextEditor.initializeBase(this, [element]);

    //Required Event Handlers
    //Required Event Handlers
    var target = this.get_element();
    this._TexteditorElement = this.get_element();
    this._TextBoxElement = this._TexteditorElement.getElementsByTagName("input")[0];

    //this._TextBoxElement.add_blur(this._textBoxElement_onblur);
    this._blurHandler = Function.createDelegate(this._TextBoxElement, this._textBoxElement_onblur);
    this._focusHandler = Function.createDelegate(this._TextBoxElement, this._textBoxElement_onfocus);

    $addHandlers(this._TextBoxElement, { 'blur': this._blurHandler, 'focus': this._focusHandler }, this);


};

CustomControls.TextEditor.prototype =
{
    initialize: function () {
        CustomControls.TextEditor.callBaseMethod(this, "initialize");
        var element = this.get_element();
    },

    _textBoxElement_onblur: function (e) {


        if (this.Validators != null) {

            if (this.className.indexOf("RadInput_Error_") != -1) {
                this.Validators[0].attributes["class"].value = "ValidatorVisible";
            }
            else {
                this.Validators[0].attributes["class"].value = "ValidatorHidden";
            }
        }
    },

    _textBoxElement_onfocus: function (e) {

        if (this.Validators != null) {
            if (this.className.indexOf("RadInput_Error_") != -1) {
                this.Validators[0].attributes["class"].value = "ValidatorVisible";
            }
            else {
                this.Validators[0].attributes["class"].value = "ValidatorHidden";
            }
        }
    },

    dispose: function () {

        var element = this.get_element();
        $clearHandlers(element);
        //$clearHandlers(this.get_element()); // Detach all event handlers
        CustomControls.TextEditor.callBaseMethod(this, "dispose");
    }

};

CustomControls.TextEditor.registerClass("CustomControls.TextEditor", Sys.UI.Control);

/////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////
//END
/////////////////////////////////////////////////////////////////////////////////////////////////////////

if (typeof (Sys) !== "undefined") {

    //Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
    Sys.Application.notifyScriptLoaded();
}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
  UICulture="bg-BG" %>

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

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <my:AjaxManager ID="AaxMgr" runat="server" />

    <my:NavigationBar ID="nb" runat="server" SelectedIndex="0" EmbeddedAccessCheck="false" MultiPageViewID="multiPage1">

    </my:NavigationBar>
    <div>
        <my:MultiPageView ID="multiPage1" runat="server" NavigatioBarID="nb" />
    </div>
  </form>
</body>
</html>

WebUserControl1.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl1.ascx.cs"
  Inherits="WebUserControl1" %>
<%@ Register TagPrefix="my" Namespace="CustomControls" %>
UserControl1:
<my:TextEditor ID="txtFirstName" ValidationGroup="abc" runat="server" Required="true" />
<br />

Regards,
Ravi

[Vasil]

Hello Ravi,

I am unable run the project without your base classes that you inherit in MultiPageView and MyCompositeControl and without the NavigationBar class.
If you send us a formal support ticket with runnable version of your site attached I would try to debug it further. It will be best if you could simplify it in sample project.

All the best,
Vasil
the Telerik team