How to pass parameters to RadDatePicker.Date Input.Client Events OnBlur from codebehind

[Mangesh]

Hi,

I am using RadDatePicker control to accept date of birth. The scenario is as follows:

My RadDatePicker control is in the dotnet datagrid (so each row will have its own instance of RadDatePicker).
There is another column in my datagrid named 'Age' which consists of normal textbox control. As per my business logic, I need to disable DateOfBirth if the age is entered and vice versa. I was trying to call javascript onblur of both the conrtols but couldn't do.

Below is my javascript code:

function disableAgeOrDOB(birthDate, age)
     {     
        if(birthDate.GetDate() != null && birthDate.GetDate()!= "")
        {
            age.disabled = true;
        }
        else if(age.value != null && age.value != "")
        {
            birthDate.DateInput.Enable() = false;
        }
     }

and here is markup:

<asp:DataGrid ID="dgTraveler" runat="server" AutoGenerateColumns="False" Width="100%"
                            HeaderStyle-CssClass="basic_textBold bg_lightorange" ItemStyle-HorizontalAlign="Center"
                            GridLines="Both" HeaderStyle-HorizontalAlign="Center">
                            <Columns>
<asp:TemplateColumn HeaderText="Date Of Birth (ddmmmyyyy)" HeaderStyle-Width="200px"
                                    HeaderStyle-HorizontalAlign="Right">
                                    <ItemTemplate>
                                        <telerik:RadDatePicker ID="dtBirthDatePicker" runat="server" MinDate="01-01-1900">
                                            <DateInput DisplayDateFormat="dd-MMM-yyyy">                                               
                                            </DateInput>
                                        </telerik:RadDatePicker>                                       
                                    </ItemTemplate>
                                </asp:TemplateColumn>
                                <asp:TemplateColumn HeaderText="Age" HeaderStyle-Width="60px">
                                    <ItemTemplate>
                                        <asp:TextBox runat="server" ID="txtAge" MaxLength="3" Width="50px" onkeypress="return AllowNumbersOnly();" />
                                    </ItemTemplate>
                                </asp:TemplateColumn>
 </Columns>
                        </asp:DataGrid>

Here is what I tried in ItemDataBound of datagrid in code behind:

RadDatePicker birthDate = (RadDatePicker)e.Item.FindControl( "dtBirthDatePicker" );
birthDate.DateInput.ClientEvents.OnBlur = string.Format( "disableAgeOrDOB('{0}','{1})'", birthDate.ClientID, age.ClientID);

I have also tried,

birthDate.DateInput.Attributes.Add("onblur", string.Format("disableAgeOrDOB('{0}','{1}');", birthDate.ID, age.ClientID));

I tried many other options also but couldn't succeed. I searched for posts but still didn't get any solution.

Can you please suggest any solution for it?

[Princy]

Hello Mangesh,

The following code is what i implemented to achieve a similar scenario as yours. Check out for difeerences with your code:
c#:

protected void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
    {
        if(e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
        {
            RadDatePicker birthDate = (RadDatePicker)e.Item.FindControl("dtBirthDatePicker");
            TextBox age = (TextBox)e.Item.FindControl("txtAge");
            birthDate.DateInput.Attributes.Add("onblur", string.Format("disableAgeOrDOB('{0}','{1}');", birthDate.ClientID, age.ClientID));
        }
    }

js:

 <script type="text/javascript">
    function disableAgeOrDOB(birthDateID, ageID)
     {
     debugger;
       var birthDate = $find(birthDateID);
       var age = document.getElementById(ageID);
        if(birthDate.GetDate() != null && birthDate.GetDate()!= "")
        {
            age.disabled = true;
        }
        else if(age.value != null && age.value != "")
        {
            birthDate.set_enabled(false);
        }
     }
    </script>

Thanks
Princy.

[Pavlina]

Hello Mangesh,

Please find more information about OnBlur client-side event handler  in the following help topic.

Additionally, the RadInput controls provide a flexible client-side API.You can easily interact with the controls in the browser using their client-side objects.
More information about client - side events is available in this article.

Kind regards,
Pavlina
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]

Thanks a lot Princy/Pavlina ,

That really helped!!
Just one thing. When I do birthDate.set_enabled(false);  in the above code, the control is getting disabled correctly but now when I click on the calender logo which shows popup,  # is getting appended in the URL. Any way to avoid this?

[Pavlina]

Hello Mangesh,

I am afraid that this behavior could be hardly avoided.
Would it be convenient for you to send me the problematic page and the detailed steps we need to follow in order to reproduce the issue you are facing.

Regards,
Pavlina
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.

[Stacey]

I need to do exactly the same, but only for DatePicker.DateInput.OnValueChanged. What will be the syntax for that? I have tried onchange, onvaluechanged, none of them worked. Thanks.

[Pavlina]

Hi Stacey ,

The OnValueChanged client-side event handler is called when the user changes the value of the input control. The event only occurs if the user entered a valid value that is different from the old value.
For more information, refer to this article:
http://www.telerik.com/help/aspnet-ajax/input_clientsideonvaluechanged.html

Best wishes,
Pavlina
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.