Problems in OnBlur Event for RadDatePicker

[Mangesh]

Hi,
I am using RadDatePicker control (birthDate) in my application. I want to add OnBlur event for it's validations. After exploring a lot, I got one way to do it as below :
birthDate.DateInput.Attributes.Add( "onblur", string.Format( "calculateAge('{0}','{1}','{2}');", birthDate.ClientID, txtAge.ClientID, txtType.ClientID ) );
Now I am facing two problems:
1. If my focus moves inside the DateInput textbox, it fires onblur event and validates input when I try to click the calender symbol to get calender popup and select date. This is because onblur event is attached to inner textbox control and not the entire RadDatePicker control.

2. If I select date birthDate.from calender popup, I get value for get_selectedDate() Inside javascript function calculateAge(), but instead if I enter date manually inside the textbox, birthDate.get_textBox().value shows that value in string format but get_selectedDate() gives null.

Please reply ASAP as my release is stucked up because of these issues.

Thanks,
Manngesh

[Mangesh]

Hi,
It'll be great if you give a reply on it as my release is on hold because of these issues.

Thanks in advance,
Mangesh

[Pavel]

Hi Mangesh,

If I understand you correctly you want to validate the value when the DateInput loses focus? The DatePicker itself cannot have focus, or lose it because it is composed of a DateInput part and the popup button which opens the Calendar. In your case you can use the ValueChanged client-side event handler of the DateInput to validate it, and it will not be triggered if you have not typed anything in it. You can hook it like this:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    <DateInput>
        <ClientEvents OnValueChanged="ValueChanged"/>
    </DateInput>
</telerik:RadDatePicker>

<script type="text/javascript">
    function ValueChanged(sender, args)
    {
        // Validate here
    }
</script>

The second problem is caused by the fact that, by design, the inner parsing that the DateInput is doing is executed when the control loses focus. Thus the get_selectedDate() method will return the initial value until the new value is parsed.

Generally I can recommend you to consider validating the value either in the ValueChanged event handler of the DateInput part of the DatePicker, or when the form is submitted with asp Validator controls.

Hope this helps.

All the best,
Pavel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Mangesh]

Hi,

Thanks for the reply. Just one query: Will OnValueChanged get fired when I modify value in the dateinputbox as well as if I select date from the calender popup?

[Pavel]

Hello Mangesh,

OnValueChanged will be fired after you change the value and the DateInput loses focus. Thus when it is executed the entered value has been parsed by the control and you can access it with the get_selectedDate() client-side method.

Regards,
Pavel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Greg]

I'm dynamically creating datepickers from VB.NET server-side code and dynamically setting their ID.  The "i" variable is my loop index.  I then attach my javascript function as below but it doesn't ever fire after I type in a new date and tab away to other controls.  I see that the function is attached to a DIV element whose name ends with _wrapper.  What am I doing wrong?  Thanks

Dim oDPOffenseDate As New RadDatePicker

oDPOffenseDate.ID = "OffenseDateSeq" & i.ToString()

oDPOffenseDate.Attributes.Add("OnValueChanged", "StoreUserTypedOffenseDate(this," & i.ToString() & ")")

 

javascript:

function StoreUserTypedOffenseDate(tb,i) {
            var oTBOffenseDateForThisCharge = document.getElementById('ctl00_cphBody_OffenseDateSeq' + j.toString() + '_dateInput');
            var hOffenseDateForThisCharge = document.getElementById('cphBody_hOffenseDateForThisChargeROW' + j.toString());
            hOffenseDateForThisCharge.value = oTBOffenseDateForThisCharge.get_selectedDate(); //grab what's in the datepicker and store in hidden field
        }

 

Generated HTML:

<div id="ctl00_cphBody_OffenseDateSeq0_wrapper" class="RadPicker RadPicker_Simple" OnValueChanged="StoreUserTypedOffenseDate(this,0)" style="display:inline-block;width:100px;">

[Greg]

Sorry, typo: replace the j.toString() with i.toString() but the function never fires at all is the issue.