This is a migrated thread and some comments may be shown as answers.

[Solved] Month/Year Picker in a Grid FilterTemplate Issue

1 Answer 91 Views

Grid

This is a migrated thread and some comments may be shown as answers.

William Mace asked on 20 Oct 2009, 07:06 PM

I was not sure which forum this is most appropriate in so I cross-posted this here and to the Calendar forum.
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>

1 Answer, 1 is accepted

Accepted