DatePicker Calendar Popup

[Philip]

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.

[Sebastian]

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

[Philip]

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!

[Philip]

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!

[Rosen]

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

[Philip]

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

[Philip]

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...

[Rosen]

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

[Philip]

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

[Sam]

@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?

[Sam]

Here are the screen shots of the Date picker I have

http://content.screencast.com/users/Sam.Dawson/folders/Jing/media/3a5acdf1-eb31-47cf-bb5f-ef8497f49c5a/2014-04-25_1141_001.png

Here is the HTML I am trying to change the (RED arrows) value with individual Names (Green arrows)
http://content.screencast.com/users/Sam.Dawson/folders/Jing/media/e6f4c5cf-d6c8-4751-bd72-6eb89d25ead1/2014-04-25_1140.png

[Milena]

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

 

 

[Sam]

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.