Extending AJAX functionality of RadInput controls

10 posts, 0 answers
  1. Dmitry
    Dmitry avatar
    121 posts
    Member since:
    Jul 2010

    Posted 21 Sep 2011 Link to this post

    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.
  2. Dmitry
    Dmitry avatar
    121 posts
    Member since:
    Jul 2010

    Posted 21 Sep 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 26 Sep 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. Dmitry
    Dmitry avatar
    121 posts
    Member since:
    Jul 2010

    Posted 26 Sep 2011 Link to this post

    Yes, and grid works fine until I try to extend controls.
  6. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 28 Sep 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  7. Dmitry
    Dmitry avatar
    121 posts
    Member since:
    Jul 2010

    Posted 11 Oct 2011 Link to this post

    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;
     
    [assemblyWebResource("UpeWeb.ASPNET.UI.Scripts.ZDateTimePicker.js""text/javascript")]
    [assemblyWebResource("UpeWeb.ASPNET.UI.Scripts.ZDateTimePicker.debug.js""text/javascript")]
    namespace UpeWeb.ASPNET.UI.Controls
    {
        public class ZDateTimePicker : RadDateTimePickerIZSheetControlIScriptControl
        {
            public ZSheetItem Item { getset; }
     
            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<ScriptReferenceIScriptControl.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<ScriptDescriptorIScriptControl.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.






  8. Dmitry
    Dmitry avatar
    121 posts
    Member since:
    Jul 2010

    Posted 11 Oct 2011 Link to this post

    Almost forgot.
    I'm already using regular ASP.NET UpdatePanel. Not sure if this is critical now.
  9. Dmitry
    Dmitry avatar
    121 posts
    Member since:
    Jul 2010

    Posted 12 Oct 2011 Link to this post

    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.
  10. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 14 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  11. Dmitry
    Dmitry avatar
    121 posts
    Member since:
    Jul 2010

    Posted 27 Oct 2011 Link to this post

    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"}, nullnull, $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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017