Month/Year RadDatePicker inside of EditForm

[Dan]

I'm trying to use a raddatepicker in a radgrid where the user can only select the Month and Year, rather than the date from the RadCalendar.  

I have implemented this once before using the javascript from the Code Library at the link below and it has worked fine.

http://www.telerik.com/community/code-library/aspnet-ajax/calendar/month-year-picker.aspx

Now I am trying to apply it to a raddatepicker that is inside of an EditForm and it will not work.  

I can pass in the RadDatePicker's client ID and when I debug I see that it finds the object, but it continually tells me that the object does not contain those methods or properties.  

The applicable code is below.  Please let me know if you can help me or if you need any further information.

<script type="text/javascript">
        //override the onload event handler to change the picker after the page is loaded
        window.onload = function ()
        {
            window.setTimeout(function() {SetCalendarTable();},200)
        }

        function SetCalendarTable()
        {
            var picker = "ctl00_RadPanel_ForecastGrid_ctl00_ctl02_ctl02_rdpForecastStartDate";
            var calendar = picker.get_calendar();
            var fastNavigation = calendar._getFastNavigation();

            $clearHandlers(picker.get_popupButton());
            $addHandler(picker.get_popupButton(), "click", function()
            {
                //debugger;
                var textbox = picker.get_textBox();
                //adjust where to show the popup table
                var x, y;
                var adjustElement = textbox;
                if (textbox.style.display == "none")
                    adjustElement = picker.get_popupImage();

                var pos = picker.getElementPosition(adjustElement);
                x = pos.x;
                y = pos.y + adjustElement.offsetHeight;

                var e = {
                              clientX : x,
                              clientY : y
                          };
                //synchronize the input date if set with the picker one
                var date = picker.get_selectedDate();
                if(date)
                {
                    calendar.FocusedDate[0] = date.getFullYear();
                    calendar.FocusedDate[1] = date.getMonth() + 1;
                }

                $get(calendar._titleID).onclick(e);
            });

            fastNavigation.OnOK =
            function()
            {
                var date = new Date(fastNavigation.Year, fastNavigation.Month, 1);
                picker.get_dateInput().SetDate(date);
                fastNavigation.Popup.Hide();

            }

            fastNavigation.OnToday =
            function()
            {
                var date = new Date();
                picker.get_dateInput().SetDate(date);
                fastNavigation.Popup.Hide();
            }
        }
    </script>

<telerik:RadGrid ID="ForecastGrid"
        AllowPaging="True"
        AllowSorting="True"
        EnableEmbeddedSkins="false"
        GridLines="None"
        OnInsertCommand="ForecastGrid_InsertCommand"
        OnItemCommand="ForecastGrid_ItemCommand"
        OnItemCreated="ForecastGrid_ItemCreated"
        OnItemDataBound="ForecastGrid_ItemDataBound"
        OnNeedDataSource="ForecastGrid_NeedDataSource"
        OnUpdateCommand="ForecastGrid_UpdateCommand"
        PageSize="15"
        runat="server"
        ShowFooter = "true"
        Skin="AO"
        Visible = "true">

        <MasterTableView CommandItemDisplay="Bottom" AutoGenerateColumns = "false" DataKeyNames="ForecastId">

<EditFormSettings EditFormType = "Template">
                <FormTemplate>
                    <div style="padding: 10px;">
                        <div class="text">
                            Click the <b>Save</b> button to save your changes.</div>
                        <div>
                            <asp:Label Visible="false" ID="ErrorLabel" runat="server" /></div>
                        <div style="clear: both;">
                        </div>
                        <div class="validation-summary">
                            <asp:ValidationSummary HeaderText="Changes not saved." DisplayMode="SingleParagraph"
                                ID="ValidationSummary1" runat="server"></asp:ValidationSummary>
                        </div>
                        <div style="clear: both;">
                        </div>

                        <div>
                            <asp:Label ID="ForecastIdLabel" Visible="false" runat="server" Text='<%# Bind("ForecastId") %>'></asp:Label></div>
                        <div>

                        <div>
                            <asp:Label ID="IsActiveLabel" Visible="false" runat="server" Text='<%# Bind("IsActive") %>'></asp:Label>
                        </div>

                        <div class="label-short" style="float: left; padding-bottom: 5px; width:150px;">
                            Forecast Name:</div>
                        <div style="padding-bottom: 5px;">
                            <Telerik:RadTextBox ID="ForecastName" runat="server" Skin="AO" EnableEmbeddedSkins="false"
                                Text='<%# Bind("ForecastName") %>' Width="240" MaxLength="50">
                            </Telerik:RadTextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="ForecastName"
                                ErrorMessage="Forecast Name is required.">*</asp:RequiredFieldValidator>
                        </div>
                        <div style="clear: both;">
                        </div>

                        <div class="label-short" style="float: left; padding-bottom: 5px; width:150px;">
                            Forecast Start Date:</div>
                        <div style="padding-bottom: 5px;">
                            <telerik:RadDatePicker ID="rdpForecastStartDate" DateInput-DateFormat="MMMM, yyyy" runat="server"
                                AutoPostBack="false" ToolTip="Month" Width="130px" CssClass="date-picker" Skin="AO"
                                EnableEmbeddedSkins="false">
                            </telerik:RadDatePicker>
                            <%--<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="rdpForecastStartDate"
                                ErrorMessage="Forecast Start Date is required.">*</asp:RequiredFieldValidator>--%>
                        </div>
                        <div style="clear: both;">
                        </div>

                        <div class="label-short" style="float: left; padding-bottom: 5px; width:150px;">
                            Forecast Length:</div>
                        <div style="padding-bottom: 5px;">
                            <telerik:RadComboBox ID="rcbForecastLength" runat="server" ZIndex="7020" Skin="AO" EnableEmbeddedSkins="false" Width="243">
                            </telerik:RadComboBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="rcbForecastLength"
                                ErrorMessage="Forecast Length is required.">*</asp:RequiredFieldValidator>
                        </div>
                        <div style="clear: both;">
                        </div>

                        <div class="label-short" style="float: left; padding-bottom: 5px; width:150px;">
                            Is Active:</div>
                        <div style="float: left; padding-bottom: 5px;">
                            <asp:CheckBox ID="IsActiveCheckbox" runat="server"></asp:CheckBox>
                        </div>
                        <div style="clear: both;">
                        </div>

                        <div>
                            <asp:Button ID="UpdateButton" CssClass="button" runat="server" Text="Save" CommandName="Update" />
                            <asp:Button ID="InsertButton" CssClass="button" runat="server" Text="Save" CommandName="PerformInsert" />
                            <asp:Button ID="CancelButton" CssClass="button" runat="server" Text="Cancel" CommandName="Cancel"
                                CausesValidation="false" />
                        </div>
                    </div>
                </FormTemplate>
            </EditFormSettings>
        </MasterTableView>
    </telerik:RadGrid>

[Pavlina]

Hi Dan,

Attached to this message is a simple runnable application that demonstrates the desired functionality. Please give it a try and see if it works as expected.

I hope this helps.

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.

[Dan]

Thank you very much. This worked Perfectly!!  That is an interesting approach using the onload event of the calendar popup.

[Yuri Drojetz]

Hi,Pavlina,
I try this solution and very happy. Thanks.
But i have some problem if control RadDatePicker placed on the bottom part of long page (with vertical scrolling).
No any grid - simple put this control on bottom part of asp page.
While i press on popupImage  - it causes automatically scroll up to top of window.
Besides table of calendar leaves from DateInput.

If RadDatePicker placed on top part of page - no any problem.

Please let me know if you can help me.
Best Regards.
Yuri.

[Pavlina]

Hi Yuri,

I am sending you a simple working project which is working properly. Please examine it and let me know if it helps to achieve the desired functionality.

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

[Yuri Drojetz]

Hi,Pavlina,
This worked Perfectly.
Thank you very much.
 Best regards,
Yuri

[NetDeveloper1107]

Hi ,

We are using Telerik 2008 version and in this version we can see the issue of radcalender control I have radcalender control on bottom of the once I select date the page is scrolled at top and the sample code which you have given in this post i tried it but the problem still persists.

But the same is working proper in Telerik 2009 version. Is there any workaround for this issue in 2008 version.

Waiting for the reply..

[Maria Ilieva]

Hello,

Currently a fix for this issue is provided in Telerik 2009 and later versions. Therefore we suggest upgrading your project to the latest version of Telerik Controls.


All the best,
Maria Ilieva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rudá Cunha]

It worked perfectly, but when he has the option ShowPopupOnFocus
continues to open in the old way. Only the button works!

And how to resolve this case?

[Maria Ilieva]

Hi Rudá Cunha,

I tried to replicate the described issue using ShowPopupOnFocus property but to no avail. Please find attached a sample application which works correctly on my side. Test it locally and let me know what the difference in your case is.

Best wishes,
Maria Ilieva
the Telerik team

[Rudá Cunha]

This example you sent is not the same as the example
http://www.telerik.com/community/forums/aspnet-ajax/calendar/month-year-
raddatepicker-inside-of-EditForm.aspx # 1036459

The above example (instead of showing the full schedule shows only the month
and year), only the button only works when I put the ShowPopupOnFocus, the
place the focus shows a complete schedule, I want to show the
same button.

[Maria Ilieva]

Hello,

In order to have the popup form to show the needed way when the input is focused you should add the same handlers as for the popup button but for the textbox component:

$clearHandlers(picker.get_textBox());
                $addHandler(picker.get_textBox(), "click", function() {
.....
}

Kind regards,
Maria Ilieva
the Telerik team

[Rudá Cunha]

It worked only when they click, then changed to focus. But I still have a
problem, I lose focus in the field, ie can not enter.

[Maria Ilieva]

Hello,

Please find attached a sample application which demonstrates the correct behavior of this scenario.
 I hope this helps.


All the best,
Maria Ilieva
the Telerik team

[Rudá Cunha]

I think you do not understand the problem.

The example you sent works. But I can not enter the date manually, or
loses the focus is on the field.

Take this test: Click on the field and then type on the keyboard to date! Can not
enter the date! That's the problem!

[Maria Ilieva]

Hello,

Find the movie which replicates my local tests with the project I have sent you. As you can see I'm able to type in the input field:
http://screencast.com/t/yuguN5uNVo


Greetings,
Maria Ilieva
the Telerik team

[Rudá Cunha]

It worked in IE, but I tested in Firefox, Chrome and Safari and did not work.

[Maria Ilieva]

Hello Rudá Cunha,

You are correct that this implementation does not work in other browsers than IE. We will further research on the issue and do our best to provide proper solution.
Thank you for your understanding.

Sincerely yours,
Maria Ilieva
the Telerik team

[Sibi]

Hi,

I am using the Telerik.Web.UI version 2008.02.1001.20. I am facing a similar problem which most of them have reported in this post. Its about the page moving to top when the date button is clicked. I used the solution provided here but the calendar here shows up in Month/Year format whereas my requirement is to show the complete calendar with the current date selected. What can I do for that? To summarize - I need to do the following
1. Display the calendar with current date in red color
2. Eliminate the scrolling to top that happens when date is selected by user.

Thanks,
Sibi

[Maria Ilieva]

Hello Sibi,

Could I kindly ask you to submit a regular support ticket and send us sample runnable version of your application which demonstrates the described issue. Thus we will be able to see the exact scenario you have and do our best to implement the needed fixes so your requirements are covered.

All the best,
Maria Ilieva
the Telerik team

[Nahwin]

hmm..,

why is it when always selecting january for the month?

I'm using the first example from paviliana and there is 2 raddatepicker inside my editformtemplate

[Maria Ilieva]

Hi Nahwin,

I'm not completely sure what exact;y is the issue you are facing.

Could you please open a separate post for the problem and provide some more information as well as the page markup with the related code behind? Thus we will be able to better track the problem and further investigate the problematic behavior.

Kind regards,
Maria Ilieva
the Telerik team