RadDatePicker SelectedDate null when disable

7 posts, 0 answers
  1. guillaume.lebel
    guillaume.lebel avatar
    60 posts
    Member since:
    Oct 2012

    Posted 12 Jan 2010 Link to this post

    Hi,

    In my page i have 3 date picker, but only 2 are enable. The last one of those is disable and only have a selectedDate when the first 2 one have a date selected. Everything is set from client side on OnDateSelected event.

    But i try to get the date from my last datepicker in server side it always return me a null value.

    I try to enable the control and it work fine i was able to get the selecteddate. But i can't keep the control enable i absolutly need it disable.

    Here is the code i'm using to validate my selecteddate:

            <script language="javascript" type="text/javascript">  
     
                var datePickerAttributionSetter;  
                function InitializedAttributionDateSetter(sender, args)  
                {  
                    var datePickerAttribution = $find("<%= RadDatePickerAttribution.ClientID %>");  
                    var datePickerTheoricalExam = $find("<%= RadDatePickerTheroicExam.ClientID %>");  
                    var datePickerPracticalExam = $find("<%= RadDatePickerPracticalExam.ClientID %>");  
     
                    datePickerAttributionSetter =  
                     new QualificationAttribution.QualificationAttributionDateSetter(datePickerAttribution,  
                     datePickerTheoricalExam, datePickerPracticalExam);  
                }  
                  
                Sys.Application.add_load(InitializedAttributionDateSetter);      
            </script> 

    QualificationAttribution.QualificationAttributionDateSetter = function(datePickerAttribution, datePickerTheoricalExam, datePickerPracticalExam)  
    {  
        this._datePickerAttribution = datePickerAttribution;  
        this._datePickerTheoricalExam = datePickerTheoricalExam;  
        this._datePickerPracticalExam = datePickerPracticalExam;  
     
        if ((this._datePickerTheoricalExam != null) && (this._datePickerPracticalExam != null))  
        {  
            var theoricalSelectedDateHandler = FixHandler(this.OnSelectedDate, this);  
            datePickerTheoricalExam.add_dateSelected(theoricalSelectedDateHandler);  
            datePickerTheoricalExam.add_disposing(function()  
            {  
                datePickerTheoricalExam.remove_dateSelected(theoricalSelectedDateHandler);  
            });  
     
            var practicalSelectedDateHandler = FixHandler(this.OnSelectedDate, this);  
            datePickerPracticalExam.add_dateSelected(practicalSelectedDateHandler);  
            datePickerPracticalExam.add_disposing(function()  
            {  
                datePickerPracticalExam.remove_dateSelected(practicalSelectedDateHandler);  
            });  
        }  
    }  
     
    QualificationAttribution.QualificationAttributionDateSetter.prototype.OnSelectedDate = function()  
    {  
        var theoricalExamDate = this.GetDate(this._datePickerTheoricalExam);  
        var practicalExamDate = this.GetDate(this._datePickerPracticalExam);  
     
        if ((theoricalExamDate != null) && (practicalExamDate != null))  
        {  
            var highestDate = this.GetHighestDate(theoricalExamDate, practicalExamDate);  
            this._datePickerAttribution.set_selectedDate(new Date(highestDate));  
        }  
        else 
        {  
            this._datePickerAttribution.set_selectedDate();  
        }  
    }  
     
    QualificationAttribution.QualificationAttributionDateSetter.prototype.GetDate = function(radDatePicker)  
    {  
        return radDatePicker.get_selectedDate();  
    }  
     
    QualificationAttributionDateSetter.prototype.GetHighestDate = function(theoricalExamDate, practicalExamDate)  
    {  
        if ((theoricalExamDate == null) || (practicalExamDate == null))  
        {  
            return null;  
        }  
          
        if (theoricalExamDate > practicalExamDate)  
        {  
            return theoricalExamDate;  
        }  
        return practicalExamDate;  

    Thx for your time,
    Guillaume
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Jan 2010 Link to this post

    Hello Guillaume,

    Disabled controls do not post their values to the server in Internet Explorer.

    On the other hand, if the third datepicker will always be disabled, you don't need it at all - it will be better to use a more simple control to display a date. The date can be posted to the server in a HiddenField control, which the users cannot modify.

    All the best,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    35 posts
    Member since:
    Sep 2013

    Posted 30 Sep 2013 Link to this post

    I have this same problem.  I have a series of DatePickers and they have to be selected in order.  So as the user progresses through them, my client-side code will disable ones they can no longer change.  So I put the selected dates in hidden fields like suggested.  It's not really easy to figure out exactly how to do that so I'm posting it here.

    <telerik:RadDatePicker runat="server" ID="RadDatePicker1"
       ClientEvents-OnDateSelected="RadDatePicker1_DateSelected"/>
    <asp:HiddenField runat="server" ID="hdnRadDatePicker1"/>

    function RadDatePicker1_DateSelected(sender, eventArgs)
    {
        if (eventArgs.get_newDate() == null)
        {
            $("#<%= hdnRadDatePicker1.ClientID %>").val("");
        }
        else
        {
            $("#<%= hdnRadDatePicker1.ClientID %>").val(eventArgs.get_newValue());
        }
    }

    However, I'm also setting the maxDate and minDate on the client-side and they are NOT null when the control is disabled and I post back.  So I'm thinking our friends at Telerik could actually find a way to help us out with a built in work-around.  Perhaps a DisabledSelectedDate property?  Just when y'all get some spare time.  :-)

    Oh, and documenting this IE issue on this page, right in the description of the set_enabled would be a great benefit too!
  5. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 03 Oct 2013 Link to this post

    Hi Jon,

    There is ReadOnly property which will do exactly what it is required. The input will feel like disabled, because the user will not be able to change its value, but the changed value using JavaScript will be submitted.

    Regards,
    Vasil
    Telerik
    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 the blog feed now.
  6. Jon
    Jon avatar
    35 posts
    Member since:
    Sep 2013

    Posted 11 Oct 2013 Link to this post

    I tried your suggestion, but it's not really doing what I want unless I'm misunderstanding something.  I made a screencast of what I'm currently doing.  I like this current behavior and look/feel.

    I only allow the user to update the last entered date or enter the new date for the next stage.  When I send the page out from the server, I set the enabled property on the server.  When the user makes a change on the client, I enable/disable the appropriate RadDatePickers on the client.

    I see where I can set the ReadOnly on the DateInput and disable the Calendar on the server.  But I don't like the way it looks/behaves, and I don't see that I can set the ReadOnly property on the client.  So I don't think this is helpful for me.  Am I missing something?
  7. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 16 Oct 2013 Link to this post

    Hi Jon,

    Now I see your exact requirements from the video that you have sent. Indeed to achieve this you will need to submit the values in another form element, because when the Picker is disabled, it will not submit the value.
    You could however remove the disabled attribute from the picker's hidden input, and it will be able to submit the value. This will work only if the Picker was Enabled server side before the current postback.
    Here is example code:
    $find("RadDatePicker1").set_enabled(false);
    $find("RadDatePicker1").get_dateInput().set_enabled(true);
    $get("RadDatePicker1" + "_wrapper").removeAttribute("disabled");

    Please note that .set_enabled(true) for the DateInput is different than .enable(). This only update its client state, but the DateInput will not look as enabled.

    Regards,
    Vasil
    Telerik
    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 the blog feed now.
  8. Jon
    Jon avatar
    35 posts
    Member since:
    Sep 2013

    Posted 16 Oct 2013 Link to this post

    Oh. OK.  It's good to know I have additional options.  I think I'll just stick with the above solution I posted.  Although it's not ideal, it is working well.

    Thanks for following up.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017