DatePicker in edit template of RadGrid

3 posts, 1 answers
  1. Darren
    Darren avatar
    44 posts
    Member since:
    Sep 2008

    Posted 17 Nov 2008 Link to this post

    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>

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Nov 2008 Link to this post

    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
  3. Answer
    Daniel
    Admin
    Daniel avatar
    4949 posts

    Posted 18 Nov 2008 Link to this post

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