This is a migrated thread and some comments may be shown as answers.
Month/Year RadDatePicker inside of EditForm
21 Answers 278 Views
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 24 Jul 2009, 10:37 PM

I'm trying to use a raddatepicker in a radgrid where the user can only select the Month and Year, rather than the date from the RadCalendar.  


I have implemented this once before using the javascript from the Code Library at the link below and it has worked fine.


Now I am trying to apply it to a raddatepicker that is inside of an EditForm and it will not work.  

I can pass in the RadDatePicker's client ID and when I debug I see that it finds the object, but it continually tells me that the object does not contain those methods or properties.  

The applicable code is below.  Please let me know if you can help me or if you need any further information.

<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 = "ctl00_RadPanel_ForecastGrid_ctl00_ctl02_ctl02_rdpForecastStartDate";      
            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> 
 
<telerik:RadGrid ID="ForecastGrid"   
        AllowPaging="True"   
        AllowSorting="True"   
        EnableEmbeddedSkins="false" 
        GridLines="None"   
        OnInsertCommand="ForecastGrid_InsertCommand"   
        OnItemCommand="ForecastGrid_ItemCommand" 
        OnItemCreated="ForecastGrid_ItemCreated"   
        OnItemDataBound="ForecastGrid_ItemDataBound"   
        OnNeedDataSource="ForecastGrid_NeedDataSource" 
        OnUpdateCommand="ForecastGrid_UpdateCommand" 
        PageSize="15" 
        runat="server" 
        ShowFooter = "true" 
        Skin="AO" 
        Visible = "true">  
          
        <MasterTableView CommandItemDisplay="Bottom" AutoGenerateColumns = "false" DataKeyNames="ForecastId">  
 
<EditFormSettings EditFormType = "Template">  
                <FormTemplate> 
                    <div style="padding: 10px;">  
                        <div class="text">  
                            Click the <b>Save</b> button to save your changes.</div> 
                        <div> 
                            <asp:Label Visible="false" ID="ErrorLabel" runat="server" /></div>  
                        <div style="clear: both;">  
                        </div> 
                        <div class="validation-summary">  
                            <asp:ValidationSummary HeaderText="Changes not saved." DisplayMode="SingleParagraph" 
                                ID="ValidationSummary1" runat="server"></asp:ValidationSummary> 
                        </div> 
                        <div style="clear: both;">  
                        </div> 
                          
                        <div> 
                            <asp:Label ID="ForecastIdLabel" Visible="false" runat="server" Text='<%# Bind("ForecastId") %>'></asp:Label></div>  
                        <div> 
                  
                        <div> 
                            <asp:Label ID="IsActiveLabel" Visible="false" runat="server" Text='<%# Bind("IsActive") %>'></asp:Label> 
                        </div> 
                          
                        <div class="label-short" style="float: left; padding-bottom: 5px; width:150px;">  
                            Forecast Name:</div> 
                        <div style="padding-bottom: 5px;">  
                            <Telerik:RadTextBox ID="ForecastName" runat="server" Skin="AO" EnableEmbeddedSkins="false" 
                                Text='<%# Bind("ForecastName") %>' Width="240" MaxLength="50">  
                            </Telerik:RadTextBox> 
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="ForecastName" 
                                ErrorMessage="Forecast Name is required.">*</asp:RequiredFieldValidator> 
                        </div> 
                        <div style="clear: both;">  
                        </div> 
                          
                        <div class="label-short" style="float: left; padding-bottom: 5px; width:150px;">  
                            Forecast Start Date:</div> 
                        <div style="padding-bottom: 5px;">  
                            <telerik:RadDatePicker ID="rdpForecastStartDate" DateInput-DateFormat="MMMM, yyyy" runat="server" 
                                AutoPostBack="false" ToolTip="Month" Width="130px" CssClass="date-picker" Skin="AO" 
                                EnableEmbeddedSkins="false">  
                            </telerik:RadDatePicker> 
                            <%--<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="rdpForecastStartDate" 
                                ErrorMessage="Forecast Start Date is required.">*</asp:RequiredFieldValidator>--%> 
                        </div> 
                        <div style="clear: both;">  
                        </div> 
                          
                        <div class="label-short" style="float: left; padding-bottom: 5px; width:150px;">  
                            Forecast Length:</div> 
                        <div style="padding-bottom: 5px;">  
                            <telerik:RadComboBox ID="rcbForecastLength" runat="server" ZIndex="7020" Skin="AO" EnableEmbeddedSkins="false" Width="243">  
                            </telerik:RadComboBox> 
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="rcbForecastLength" 
                                ErrorMessage="Forecast Length is required.">*</asp:RequiredFieldValidator> 
                        </div> 
                        <div style="clear: both;">  
                        </div> 
                          
                        <div class="label-short" style="float: left; padding-bottom: 5px; width:150px;">  
                            Is Active:</div> 
                        <div style="float: left; padding-bottom: 5px;">  
                            <asp:CheckBox ID="IsActiveCheckbox" runat="server"></asp:CheckBox> 
                        </div> 
                        <div style="clear: both;">  
                        </div> 
 
                        <div> 
                            <asp:Button ID="UpdateButton" CssClass="button" runat="server" Text="Save" CommandName="Update" /> 
                            <asp:Button ID="InsertButton" CssClass="button" runat="server" Text="Save" CommandName="PerformInsert" /> 
                            <asp:Button ID="CancelButton" CssClass="button" runat="server" Text="Cancel" CommandName="Cancel" 
                                CausesValidation="false" /> 
                        </div> 
                    </div> 
                </FormTemplate> 
            </EditFormSettings> 
        </MasterTableView> 
    </telerik:RadGrid> 

21 Answers, 1 is accepted

Sort by
0
Accepted
Pavlina
Telerik team
answered on 30 Jul 2009, 09:19 AM
Hi Dan,

Attached to this message is a simple runnable application that demonstrates the desired functionality. Please give it a try and see if it works as expected.

I hope this helps.

Regards,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Dan
Top achievements
Rank 1
answered on 30 Jul 2009, 03:46 PM
Thank you very much. This worked Perfectly!!  That is an interesting approach using the onload event of the calendar popup.


0
Yuri Drojetz
Top achievements
Rank 1
answered on 13 Dec 2009, 09:43 AM
Hi,Pavlina,
I try this solution and very happy. Thanks.
But i have some problem if control RadDatePicker placed on the bottom part of long page (with vertical scrolling).
No any grid - simple put this control on bottom part of asp page.
While i press on popupImage  - it causes automatically scroll up to top of window.
Besides table of calendar leaves from DateInput.

If RadDatePicker placed on top part of page - no any problem.

Please let me know if you can help me.
Best Regards.
Yuri.



0
Pavlina
Telerik team
answered on 16 Dec 2009, 02:12 PM
Hi Yuri,

I am sending you a simple working project which is working properly. Please examine it and let me know if it helps to achieve the desired functionality.

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.
0
Yuri Drojetz
Top achievements
Rank 1
answered on 20 Dec 2009, 12:52 PM
Hi,Pavlina,
This worked Perfectly.
Thank you very much.
 Best regards,
Yuri
0
NetDeveloper1107
Top achievements
Rank 1
answered on 19 May 2010, 11:13 AM
Hi ,

We are using Telerik 2008 version and in this version we can see the issue of radcalender control I have radcalender control on bottom of the once I select date the page is scrolled at top and the sample code which you have given in this post i tried it but the problem still persists.

But the same is working proper in Telerik 2009 version. Is there any workaround for this issue in 2008 version.

Waiting for the reply..


0
Maria Ilieva
Telerik team
answered on 19 May 2010, 12:34 PM
Hello,

Currently a fix for this issue is provided in Telerik 2009 and later versions. Therefore we suggest upgrading your project to the latest version of Telerik Controls.


All the best,
Maria Ilieva
the Telerik team


Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Rudá Cunha
Top achievements
Rank 2
answered on 20 Oct 2010, 06:17 PM
It worked perfectly, but when he has the option ShowPopupOnFocus
continues to open in the old way. Only the button works!

And how to resolve this case?

0
Maria Ilieva
Telerik team
answered on 25 Oct 2010, 02:21 PM
Hi Rudá Cunha,

I tried to replicate the described issue using ShowPopupOnFocus property but to no avail. Please find attached a sample application which works correctly on my side. Test it locally and let me know what the difference in your case is.


Best wishes,
Maria Ilieva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Rudá Cunha
Top achievements
Rank 2
answered on 25 Oct 2010, 02:29 PM
This example you sent is not the same as the example
http://www.telerik.com/community/forums/aspnet-ajax/calendar/month-year-
raddatepicker-inside-of-EditForm.aspx # 1036459

The above example (instead of showing the full schedule shows only the month
and year), only the button only works when I put the ShowPopupOnFocus, the
place the focus shows a complete schedule, I want to show the
same button.
0
Maria Ilieva
Telerik team
answered on 27 Oct 2010, 01:10 PM
Hello,

In order to have the popup form to show the needed way when the input is focused you should add the same handlers as for the popup button but for the textbox component:

$clearHandlers(picker.get_textBox());
                $addHandler(picker.get_textBox(), "click", function() {
.....
}


Kind regards,
Maria Ilieva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Rudá Cunha
Top achievements
Rank 2
answered on 27 Oct 2010, 01:25 PM
It worked only when they click, then changed to focus. But I still have a
problem, I lose focus in the field, ie can not enter.
0
Maria Ilieva
Telerik team
answered on 02 Nov 2010, 01:23 PM
Hello,

Please find attached a sample application which demonstrates the correct behavior of this scenario.
 I hope this helps.


All the best,
Maria Ilieva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Rudá Cunha
Top achievements
Rank 2
answered on 02 Nov 2010, 02:40 PM
I think you do not understand the problem.

The example you sent works. But I can not enter the date manually, or
loses the focus is on the field.

Take this test: Click on the field and then type on the keyboard to date! Can not
enter the date! That's the problem!
0
Maria Ilieva
Telerik team
answered on 05 Nov 2010, 11:02 AM
Hello,

Find the movie which replicates my local tests with the project I have sent you. As you can see I'm able to type in the input field:
http://screencast.com/t/yuguN5uNVo


Greetings,
Maria Ilieva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Rudá Cunha
Top achievements
Rank 2
answered on 05 Nov 2010, 12:46 PM
It worked in IE, but I tested in Firefox, Chrome and Safari and did not work.
0
Maria Ilieva
Telerik team
answered on 10 Nov 2010, 01:44 PM
Hello Rudá Cunha,

You are correct that this implementation does not work in other browsers than IE. We will further research on the issue and do our best to provide proper solution.
Thank you for your understanding.

Sincerely yours,
Maria Ilieva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Sibi
Top achievements
Rank 1
answered on 09 Mar 2012, 02:10 PM
Hi,

I am using the Telerik.Web.UI version 2008.02.1001.20. I am facing a similar problem which most of them have reported in this post. Its about the page moving to top when the date button is clicked. I used the solution provided here but the calendar here shows up in Month/Year format whereas my requirement is to show the complete calendar with the current date selected. What can I do for that? To summarize - I need to do the following
1. Display the calendar with current date in red color
2. Eliminate the scrolling to top that happens when date is selected by user.

Thanks,
Sibi
0
Maria Ilieva
Telerik team
answered on 14 Mar 2012, 01:05 PM
Hello Sibi,

Could I kindly ask you to submit a regular support ticket and send us sample runnable version of your application which demonstrates the described issue. Thus we will be able to see the exact scenario you have and do our best to implement the needed fixes so your requirements are covered.

All the best,
Maria Ilieva
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Nahwin
Top achievements
Rank 1
answered on 15 Jan 2013, 09:21 AM
hmm..,

why is it when always selecting january for the month?

I'm using the first example from paviliana and there is 2 raddatepicker inside my editformtemplate
0
Maria Ilieva
Telerik team
answered on 17 Jan 2013, 11:38 AM
Hi Nahwin,

I'm not completely sure what exact;y is the issue you are facing.

Could you please open a separate post for the problem and provide some more information as well as the page markup with the related code behind? Thus we will be able to better track the problem and further investigate the problematic behavior.

Kind regards,
Maria Ilieva
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Asked by
Dan
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Dan
Top achievements
Rank 1
Yuri Drojetz
Top achievements
Rank 1
NetDeveloper1107
Top achievements
Rank 1
Maria Ilieva
Telerik team
Rudá Cunha
Top achievements
Rank 2
Sibi
Top achievements
Rank 1
Nahwin
Top achievements
Rank 1
Share this question
or