Month/Year Picker in a Grid FilterTemplate Issue

11 posts, 0 answers
  1. William Mace
    William Mace avatar
    12 posts
    Member since:
    Feb 2009

    Posted 20 Oct 2009 Link to this post

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

    Posted 21 Oct 2009 Link to this post

    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.
  3. William Mace
    William Mace avatar
    12 posts
    Member since:
    Feb 2009

    Posted 21 Oct 2009 Link to this post

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

    Posted 22 Oct 2009 Link to this post

    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.
  5. William Mace
    William Mace avatar
    12 posts
    Member since:
    Feb 2009

    Posted 22 Oct 2009 Link to this post

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

    Posted 26 Oct 2009 Link to this post

    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.
  7. Luca Alvanini
    Luca Alvanini avatar
    1 posts
    Member since:
    Nov 2009

    Posted 27 Nov 2009 Link to this post

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

    Posted 30 Nov 2009 Link to this post

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

    Posted 01 Dec 2009 Link to this post

    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.
  10. Iwire
    Iwire avatar
    7 posts
    Member since:
    Jul 2006

    Posted 01 Dec 2009 Link to this post

    I'm looking for this same functionality, but the sample provided has some javascript errors...
  11. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 04 Dec 2009 Link to this post

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