DatePicker in edit template of RadGrid

[Darren]

Hi,

I need a datepicker for when i edit a datetime field in my grid. It should only be possible to choose Month and Year. So from http://www.telerik.com/community/code-library/aspnet-ajax/calendar/month-year-picker.aspx I downloaded this. It works fine as is but i've placed the datepicker into my edittemplate and now i'm getting an error on the line of Javascript

---   var picker = $find("<%= RadDatePicker1.ClientID %>");
I'm guessing because my RadDatePicker1 is buried in the edittemplate. Is there a better way to use the DatePicker so i have Month/Year only or is this a good approach? If so how to reference the control?


For interest here's my column
                <telerik:GridTemplateColumn HeaderText="Period Start" DataType="System.DateTime">
                    <EditItemTemplate>
                        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Web20" Width="130px">
                            <DateInput DateFormat="MMMM yyyy" LabelCssClass="radLabelCss_Web20" Skin="Web20">
                            </DateInput>
                            <Calendar Skin="Web20">
                                <FastNavigationSettings TodayButtonCaption="current date" />
                            </Calendar>
                        </telerik:RadDatePicker>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <%#Eval("StartMonth")%>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
If you don't wanna download the datepicker from that link here is the code which provides the Month/Year only functionality:

    <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 = $find("<%= RadDatePicker1.ClientID %>");
            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>

[Shinu]

Hi Darren,

Here is a code library submission which explains how to access controls in a GridTemplateColumn on the client side. Go through it and see if it helps to some extent.
Accessing server controls in a grid template on the client

Shinu

[Daniel]

Hello Darren,

I suggest you an alternative approach:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item.IsInEditMode)
    {
        string clientID = (e.Item.FindControl("RadDatePicker1") as RadDatePicker).ClientID;
        ScriptManager.RegisterArrayDeclaration(this, "myArray", String.Format("['{0}']", clientID));
    }
}

<script type="text/javascript" language="javascript">
    var myPicker = myArray[0];

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.