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

7 posts, 0 answers
  1. Mangesh
    Mangesh avatar
    12 posts
    Member since:
    May 2009

    Posted 18 May 2009 Link to this post

    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?



  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 May 2009 Link to this post

    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.
  3. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 21 May 2009 Link to this post

    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.
  4. Mangesh
    Mangesh avatar
    12 posts
    Member since:
    May 2009

    Posted 22 May 2009 Link to this post

    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?

  5. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 25 May 2009 Link to this post

    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.
  6. Stacey
    Stacey  avatar
    1 posts
    Member since:
    Oct 2007

    Posted 13 Jan 2010 Link to this post

    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.
  7. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 14 Jan 2010 Link to this post

    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.
Back to Top