Month/Year Picker in a Grid FilterTemplate Issue

[William Mace]

We are implementing a Month/Year picker (http://www.telerik.com/community/code-library/aspnet-ajax/calendar/month-year-picker.aspx#944510) in the FilterTemplate of a RadGrid. I have copied the code from the grid below.  I have not been able to get the javascript to get a reference to the pickers ClientID - the compiler complains it does not know the TechManListPicker control.

Thanks

<telerik:GridDateTimeColumn HeaderText="Technical Manual Date" ReadOnly="true" DataField="TechnicalManualDate" DataFormatString="{0:MM/yyyy}">
                    <FilterTemplate>
                        <telerik:RadDatePicker ID="TechManListDatePicker" runat="server">
                            <DateInput DateFormat="MM/yyyy">
                            </DateInput>
                            <Calendar>
                                <FastNavigationSettings TodayButtonCaption="current date" />
                            </Calendar>
                        </telerik:RadDatePicker>
                        <telerik:RadScriptBlock ID="radScriptBlock" runat="server" >
                            <script type="text/javascript">
                                //override the onload event handler to change the picker after the page is loaded
                                //Sys.Application.add_load(setCalendarTable);

                                function setCalendarTable() {

                                    var picker = $find("<%= TechManListDatePicker.ClientID %>");
                                    var calendar = picker.get_calendar();
                                    var fastNavigation = calendar._getFastNavigation();

                                    $clearHandlers(picker.get_popupButton());
                                    picker.get_popupButton().href = "javascript:void(0);";
                                    $addHandler(picker.get_popupButton(), "click", function() {
                                        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 - document.documentElement.scrollTop
                                        };
                                        //synchronize the input date if set with the picker one
                                        var date = picker.get_selectedDate();
                                        if (date) {
                                            calendar.get_focusedDate()[0] = date.getFullYear();
                                            calendar.get_focusedDate()[1] = date.getMonth() + 1;
                                        }

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

                                        return false;
                                    });

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


                                    fastNavigation.OnToday =
                                        function() {
                                            var date = new Date();
                                            picker.get_dateInput().set_selectedDate(date);
                                            fastNavigation.Popup.Hide();
                                        }
                                }   
                            </script>
                        </telerik:RadScriptBlock>
                    </FilterTemplate>
                </telerik:GridDateTimeColumn>

[Pavlina]

Hello William,

Please try to change your code as shown bellow and let me know if it works:
Javascript:

<script type="text/javascript">
    //override the onload event handler to change the picker after the page is loaded
    function SetCalendarTable(sender, eventArgs) {
        var calendar = sender;
        var picker = $find(calendar.get_id().replace("_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().set_selectedDate(date);
            fastNavigation.Popup.Hide();
        }
        fastNavigation.OnToday =
        function() {
            var date = new Date();
            picker.get_dateInput().set_selectedDate(date);
            fastNavigation.Popup.Hide();
        }
    }
</script>

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" >
                          <DateInput runat="server" DateFormat="MM/yyyy">
                          </DateInput>
                          <Calendar runat="server">
                              <ClientEvents OnLoad="SetCalendarTable" />
                          </Calendar>
                      </telerik:RadDatePicker>

I hope this helps. 

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.

[William Mace]

Pavlin,
Thank you for that code.

I have one observation and one issue.  I found that I was not able to create a <FilterTemplate> on a telerik:GridDateTimeColumn.  Is this working as designed.  As soon as I changed it to a telerik:GridBoundColumn, the filtertemplate worked as expected.

The issue I am now running into is that when I use the calendar to open the fast navigation or I manually enter a month year (MM/YYYY), the month is always being replaced by the current month.  I cannot figure out why the javascript is doing this.

Thanks

[Pavlina]

Hello William,

RadDatePicker is a composite control (containing RadDateInput plus RadCalendar) We confirm that the RadDateInput control expects as input all three elements - day month and year, and its parsing logic has not been developed for month and year only. You can use the DisplayDateFormat property to strip the day part.
Here is an example:
ASPX:

telerik:RadDatePicker ID="rdpStartDate" runat="server">
    <DateInput ID="DateInput1" runat="server" DisplayDateFormat="MM/yyyy">
    </DateInput>
</telerik:RadDatePicker>

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.

[William Mace]

Pavlina,
That makes sense about the RadDateInput needing the 3 elements of a date.

My one issue outstanding in the javascript code you provided (which, except for this issue, works great) is that no matter what month we select in the calendar, the input box always displays current month.  For example, if I select JAN 1998 and click OK, the input box will display 10/1998.  Then if I click today, it displays 12/2009.  This is the only issue i cannot figure out.

Thanks again for the help.

[Pavlina]

Hello William,

Attached to this message is a simple working project which handles the desired functionality. Please give it a try and let me know if you have other questions or problems.

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

[Luca Alvanini]

Hello I Would like to open the Month/Year Piker withe the calendar , so when the user click on the icon of the RadDatePiker can choose the month and the Years and after the pression of the OK button choose the Day.

How can i do ?

Thanks Luca

[Pavlina]

Hello Luca,

Attached to this message is a simple working project which handles the desired functionality. Please give it a try and see if it works as expected.

I hope this helps.

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

[Pavlina]

Hello Luca,

Please find the attached project here.

Sincerely yours,
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.

[Iwire]

I'm looking for this same functionality, but the sample provided has some javascript errors...

[Pavlina]

Hi Iwire,

The project I sent you in the previous post is working fine on my side and there is no javascript errors.
Could you please specify the exact error you are getting?

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