DatePicker Calendar Popup

13 posts, 0 answers
  1. Philip
    Philip avatar
    54 posts
    Member since:
    Jan 2008

    Posted 10 Feb 2008 Link to this post

    I have a DatePicker in a RadGrid defined as follows:

    <telerik:GridTemplateColumn HeaderText="Birthdate" UniqueName="scout_dob">  
        <ItemStyle Width="75" /> 
        <ItemTemplate> 
            <asp:Label Width="70" CssClass="gridLabel" runat="server" ID="lbl_scout_dob" Text='<%# Eval("scout_dob_new") %>' /> 
        </ItemTemplate> 
        <EditItemTemplate>                              
            <telerik:RadDatePicker Width="70" ID="dp_scout_dob" Style="vertical-align: middle;" SelectedDate='<%# Bind("scout_dob") %>' runat="server">  
                <DatePopupButton Visible="False"></DatePopupButton> 
                <DateInput onclick="scoutDOBPopup()" runat="server" /> 
            </telerik:RadDatePicker> 
        </EditItemTemplate> 
    </telerik:GridTemplateColumn> 

    I cannot seem to get the calendar to popup on clicking the date box. The problem is I can't seem to find the ClientID of the DatePicker. Using <%= dp_scout_dob.ClientID %> either in a $find command in the JavaScript or passing it in the onclick event both return NULL. I even tried to figure out the actual elementID and use a getElementByID command in the JavaScript, but I couldn't seem to figure out what the actual ClientID is.

    Can someone point me in the right direction? Either help me figure out how to reference the ClientID or what the actual full ClientID is if this control is inside a RadGrid? Thanks.
  2. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 11 Feb 2008 Link to this post

    Hi Philip,

    Thank you for the explanation.

    I think that the explanation/sample application from the code library entry linked below can put you on the right path:

    http://www.telerik.com/community/code-library/submission/b311D-kmbgg.aspx

    It elaborates on a general approach about how to access server controls in grid templates client-side.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Philip
    Philip avatar
    54 posts
    Member since:
    Jan 2008

    Posted 11 Feb 2008 Link to this post

    Awesome...thank you!

    I was able to figure out the actual client id...the long way :) So that article will help me implement a more global solution.

    I appreciate the assistance!
  5. Philip
    Philip avatar
    54 posts
    Member since:
    Jan 2008

    Posted 12 Feb 2008 Link to this post

    I didn't realize the full client ID I discovered was referencing the actual row...so of course my script didn't work for every row in the grid.

    I read over the link you provided and besides confusing the heck out of me, I couldn't figure out it was trying to accomplish.

    So I'm going to breakdown and ask for some specific help for this instance.

    As mentioned above, I have a RadDatePicker in a Grid EditItemTemplate and I want to be able to click on the date box and pop the calendar window.

    I'm thinking the best way to do this is to create an ItemDataBound event for the grid, check to see if the row is in edit mode, then add an onlick attribute to the date input box to do a showPopup(). I just can't figure out how to write it :)

    Any chance you guys can give me a hand with something like that?

    Much appreciated!
  6. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 13 Feb 2008 Link to this post

    Hi Philip,

    I have attached a simple page that demonstrates the requested scenario. Please give a try and let us know if further help is needed.

    Kind regards,
    Rosen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. Philip
    Philip avatar
    54 posts
    Member since:
    Jan 2008

    Posted 13 Feb 2008 Link to this post

    Did I mention how awesome you guys are yet? THANK YOU! That worked perfectly. I had to convert the code to VB, but that was pretty easy. In case anyone needs this in VB, it's posted below. Thanks again guys...you're awesome!!!

    Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs)  
        If(TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode) Then  
            Dim picker As RadDatePicker = e.Item.FindControl("dp_scout_dob")  
            If Not picker Is Nothing Then  
                picker.DateInput.Attributes("onclick") = String.Format("showPopUp('{0}');", picker.ClientID)  
            End If  
        End If  
    End Sub 
  8. Philip
    Philip avatar
    54 posts
    Member since:
    Jan 2008

    Posted 13 Feb 2008 Link to this post

    I have one more question on this :)

    I was getting a Javascript error when adding a new record and I assumed this had to due with the DatePicker having a NULL value, so I found a post that mentioned changed the SelectedDate tag to DbSelectedDate. That worked great for adding new records...it opens a new record for me to enter data into.

    I do however, get the same error when clicking on Edit for an existing record when the date value is NULL.

    The error I get is:

    Sys.WebForms.PageRequestManagerServerErrorException: Selection out of range
    Parameter name: value

    I'm also guessing this is due to the NULL value. Is there a workaround for going into EDIT mode with a NULL value for the DatePicker? This is a birthday field where the birthday may not always be known, so I'd like to leave this field NULL if possible. I have already coded my update and insert procedures to check for a value and enter NULL in the database.

    Thanks again guys...
  9. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 15 Feb 2008 Link to this post

    Hello Philip,

    Unfortunately I'm unable to reproduce this unwanted behavior on my local machine. I have attached a modified version of the previous page that demonstrate the functionality in question. Please review it and see if I'm leaving something out.

    If you continue to experience difficulties please send us (attached to formal ticket) a small working project where this behavior can be reproduced. We will investigate further and will get back to you with our findings.

    Best regards,
    Rosen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  10. Philip
    Philip avatar
    54 posts
    Member since:
    Jan 2008

    Posted 15 Feb 2008 Link to this post

    I used your page with my data and discovered that it wasn't that column at all. I had somehow written a ZERO to another column and it was causing the error. Your code works perfect.

    Okay...that page is officially done! Thanks again guys
  11. Sam
    Sam avatar
    10 posts
    Member since:
    Feb 2014

    Posted 25 Apr 2014 Link to this post

    @Sebastian

    What about setting up a automated input for the date picker? I have the following value I am trying to input a value automatically...the Mouse Left Click does not work. OnClick doesn't seems to work with Java selection as well...

    I am new to this Telerik. How would I go about making this automated?
  12. Sam
    Sam avatar
    10 posts
    Member since:
    Feb 2014

    Posted 25 Apr 2014 in reply to Sebastian Link to this post

  13. Milena
    Admin
    Milena avatar
    224 posts

    Posted 30 Apr 2014 Link to this post

    Hello,

    You can populate RadDatePicker with date automatically using SelectedDate property of the control.
    <telerik:RadDatePicker ID="RadDatePicker1" SelectedDate="2/3/2013" runat="server" ></telerik:RadDatePicker>

    You can also set selected date client side:
    <script type="text/javascript">
        function incrementDate(picker) {
            var date = picker.get_selectedDate();
            date.setDate(date.getDate() + 1);
            picker.set_selectedDate(date);
        }
    </script>

    And server side:
    protected void Page_Load(object sender, EventArgs e)
     {
         if (!Page.IsPostBack)
         {
             RadDatePicker1.SelectedDate = new DateTime(2013, 3, 2);
         }
     }


    Regards,
    Milena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14. Sam
    Sam avatar
    10 posts
    Member since:
    Feb 2014

    Posted 29 May 2014 in reply to Milena Link to this post

    Milena,

    Thank you. I found out it was something far simpler. Telerik attempt to call from the <ID> in the DOM as default. the problem is, with RadDatePicker for our workflow is that variable changes every time you change the input (clear, add new date, change date).

    All I had to do was switch the DOM search for <Name> is exact 'Date_Picker_c' and that gave a fixed point that wouldn't break. thank you.

    Sorry I am new at Telerik.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017