Extending AJAX functionality of RadInput controls

[Dmitry]

Hello,
I use RadDatePicker and RadTextBox controls in RadGrid template columns, and I need them to have a new property named IsRequired. Also, I want check on client side whether data for this control is mandatory, and draw a red border around control if it's empty. So the only idea that comes to my mind is to create an extender control to extend serverside and clientside functionality. I did that but everything I got was "Extender controls of type "MyExtender" cannot extend controls of type RadDateTimePIcker". Is there a way to do that?
I cannot validate them on postback, if this is what you want to advice me. Neither can I validate them other way. Those rules were not set by me and those are not what should be discussed :( Can you please tell me how to extend your controls functionality?
Thank you.

[Dmitry]

Hello again,
I'm sorry for disturbing you while not having learned MSDN before :). It's ok with the situation I described in previous post but anyway I get an error while initializing extender. I admit that it might be not about your controls but ASP.NET controls in common but I just cannot find anything that could help me. So this is up to you whether to reply or not.
Here is my control javascript constructor:

UpeWeb.ASPNET.UI.Controls.ValidationExtender = function (element) {
    UpeWeb.ASPNET.UI.Controls.ValidationExtender.initializeBase(this, [element]);
    this._ctl = $find(element.id);
    this._isRequired = false;
    this._textInput = this._ctl.get_selectedDate
                        ? this._ctl.get_textBox().get_element() 
                        : this._ctl.get_element(); 
};

And I get an error on 1st line: Sys.InvalidOperationException: A control is already associated with the element.
If I comment that line, date picker still exists as Object but it has not ever initialized, and all it's methods like get_textBox() or get_dateInput() return null.
Hope to hear anything from you. Thanks.

[Maria Ilieva]

Hello Dmitry,

Cold you please let me know if the RadGrid on your page is ajaxified with some of the RadControls or with asp UpdatePanel. This error normally happens when you try to wrap an html control with an ajax control and that control has already been associated with another ajax control created previously.

Best wishes,
Maria Ilieva
the Telerik team

[Dmitry]

Yes, and grid works fine until I try to extend controls.

[Maria Ilieva]

Hello Dmitry,

Could you please let me know if th application works correctly with asp UpdatePanel instead of RadAjax. Also please disable the ajax on the page and let me know if the extender works in this case.

Best wishes,
Maria Ilieva
the Telerik team

[Dmitry]

Hello,
I'm sorry for reminding about my problem :)
I tried to go another way instead of using extender controls. Now I try to inherit RadDateTimePicker control and extend it's client functionality. Looks like it's going to work in some distant future but something's still going wrong.
This is my server side code:

using System;
using System.Collections.Generic;
using System.Web.UI;
using BSC.Common.ZSheet;
using Telerik.Web.UI;
 
[assembly: WebResource("UpeWeb.ASPNET.UI.Scripts.ZDateTimePicker.js", "text/javascript")]
[assembly: WebResource("UpeWeb.ASPNET.UI.Scripts.ZDateTimePicker.debug.js", "text/javascript")]
namespace UpeWeb.ASPNET.UI.Controls
{
    public class ZDateTimePicker : RadDateTimePicker, IZSheetControl, IScriptControl
    {
        public ZSheetItem Item { get; set; }
 
        public object Value
        {
            get { return SelectedDate; }
            set { SelectedDate = value as DateTime?; }
        }
 
        public int MinWidth
        {
            get { return 150; }
        }
 
        public ZDateTimePicker(ZSheetItem item)
        {
            Item = item;
        }
 
        #region IScriptControl
 
        IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
        {
            ScriptReference reference = new ScriptReference
            {
                Assembly = "UpeWeb.ASPNET.UI",
                Name = "UpeWeb.ASPNET.UI.Scripts.ZDateTimePicker.js",
#if DEBUG
                ScriptMode = ScriptMode.Debug,
#else
                ScriptMode = ScriptMode.Release,
#endif
            };
            yield return reference;
        }
 
        IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
        {
            var control = new ScriptControlDescriptor("UpeWeb.ASPNET.UI.Controls.ZDateTimePicker", ClientID);
            yield return control;
        }
 
        #endregion
    }
}

and here is my cliendside code:

Type.registerNamespace("UpeWeb.ASPNET.UI.Controls");
 
UpeWeb.ASPNET.UI.Controls.ZDateTimePicker = function (element) {
    UpeWeb.ASPNET.UI.Controls.ZDateTimePicker.initializeBase(this, [element]);
    this._value = '';
    this._columnID = '';
    this._columnName = '';
};
 
UpeWeb.ASPNET.UI.Controls.ZDateTimePicker.prototype = {
    get_value: function () {
        return this._value;
    },
    set_value: function (value) {
        if (this._value != value) {
            this._value = value;
            this.raisePropertyChanged("value");
        }
    },
 
    get_columnID: function () {
        return this._columnID;
    },
    set_columnID: function (value) {
        if (this._columnID != value) {
            this._columnID = value;
            this.raisePropertyChanged("columnID");
        }
    },
 
    get_columnName: function () {
        return this._columnName;
    },
    set_columnName: function (value) {
        if (this._columnName != value) {
            this._columnName = value;
            this.raisePropertyChanged("columnName");
        }
    }
};
 
UpeWeb.ASPNET.UI.Controls.ZDateTimePicker.registerClass('UpeWeb.ASPNET.UI.Controls.ZDateTimePicker', Telerik.Web.UI.RadDateTimePicker);
 
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();          

When I try to use it, I get the following error (not sure if my translation is correct): cannot get property "get_id" value: object value is null or undefined.

initialize: function () {
        this._refreshTimePopupShadowSetting();
        Telerik.Web.UI.RadDateTimePicker.callBaseMethod(this, "initialize");
        this._timePopupContainerID = this.get_timeView().get_id() + "_wrapper";
    },

that get_timeView() function always returns null so get_id() cannot return anything.
Is there something that can be done about it?
Thank you very much again for your replies.

[Dmitry]

Almost forgot.
I'm already using regular ASP.NET UpdatePanel. Not sure if this is critical now.

[Dmitry]

Hello,
Can you please help? It's crucial for our project. I need all AJAX controls in a row to be unified. For example, they all must have get_value() function and also some other functions and variables.

[Maria Ilieva]

Hello Dmitry,

The RadDateTimePicker TimeView component has the mentioned get_value() function. However it seems that the this.get_timeView() returns null for some reason and this is the source of the error you are facing. However note that without having a runnable code to debug locally it is rather difficult to isolate the exact reason for this issue. Please try to debug your code locally and verify of get_timeView returns correct value.

Regards,
Maria Ilieva
the Telerik team

[Dmitry]

Hello,
Looks like I have found what was the problem. But I'm not sure I can resolve it myself.
This is how RadDatePicker initializes with AJAX:

Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadDateInput, {"_focused":false,_......);
});
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadCalendar, {"_DayRenderChangedDays":{},........);
});
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadDatePicker, {"_PopupButtonSettings":{ ResolvedImageUrl : "", .....);
});

As you see, the control initialized with some data in JSON format
And this is how my inherited control initializes. First 2 lines are the same, but the last one looks like this:

Sys.Application.add_init(function() {
    $create(ZDatePicker.Controls.ZDatePicker, {"customValue":"Hello RadDatePicker"}, null, null, $get("zDatePicker"));
});

You see that? No base parameters are added to $create function, and there is only my single custom property there. I think this was why get_timeView() returned null.
Is there a way to correctly init custom control with base control's values?
Thank you.