Month/Year RadDatePicker inside of EditForm

22 posts, 1 answers
  1. Dan
    Dan avatar
    2 posts
    Member since:
    Mar 2009

    Posted 24 Jul 2009 Link to this post

    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> 

  2. Answer
    Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 30 Jul 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan
    Dan avatar
    2 posts
    Member since:
    Mar 2009

    Posted 30 Jul 2009 Link to this post

    Thank you very much. This worked Perfectly!!  That is an interesting approach using the onload event of the calendar popup.


  5. Yuri Drojetz
    Yuri Drojetz avatar
    2 posts
    Member since:
    Mar 2008

    Posted 13 Dec 2009 Link to this post

    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.



  6. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 Dec 2009 Link to this post

    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.
  7. Yuri Drojetz
    Yuri Drojetz avatar
    2 posts
    Member since:
    Mar 2008

    Posted 20 Dec 2009 Link to this post

    Hi,Pavlina,
    This worked Perfectly.
    Thank you very much.
     Best regards,
    Yuri
  8. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 19 May 2010 Link to this post

    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..


  9. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 19 May 2010 Link to this post

    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.
  10. Rudá Cunha
    Rudá Cunha avatar
    50 posts
    Member since:
    Mar 2010

    Posted 20 Oct 2010 Link to this post

    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?

  11. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 25 Oct 2010 Link to this post

    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
  12. Rudá Cunha
    Rudá Cunha avatar
    50 posts
    Member since:
    Mar 2010

    Posted 25 Oct 2010 Link to this post

    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.
  13. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 27 Oct 2010 Link to this post

    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
  14. Rudá Cunha
    Rudá Cunha avatar
    50 posts
    Member since:
    Mar 2010

    Posted 27 Oct 2010 Link to this post

    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.
  15. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 02 Nov 2010 Link to this post

    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
  16. Rudá Cunha
    Rudá Cunha avatar
    50 posts
    Member since:
    Mar 2010

    Posted 02 Nov 2010 Link to this post

    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!
  17. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 05 Nov 2010 Link to this post

    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
  18. Rudá Cunha
    Rudá Cunha avatar
    50 posts
    Member since:
    Mar 2010

    Posted 05 Nov 2010 Link to this post

    It worked in IE, but I tested in Firefox, Chrome and Safari and did not work.
  19. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 10 Nov 2010 Link to this post

    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
  20. Sibi
    Sibi avatar
    1 posts
    Member since:
    Mar 2012

    Posted 09 Mar 2012 Link to this post

    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
  21. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 14 Mar 2012 Link to this post

    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.
  22. Nahwin
    Nahwin avatar
    22 posts
    Member since:
    Dec 2012

    Posted 15 Jan 2013 Link to this post

    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
  23. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 17 Jan 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017