Hide Date Popup button of RadDateTimePicker at client side

5 posts, 0 answers
  1. Ajay Khedekar
    Ajay Khedekar avatar
    9 posts
    Member since:
    Jun 2009

    Posted 05 Jan 2010 Link to this post


    Hello,

    I dont know whether this is the right place to put this query, but i have read somewhere that RadDateTimePicker is part of RadClender control....so putting it here....

    I want to hide DatePopup button programmatically on client side.

    is there any way to hide/unhide DatePopup button depend upon business logic ?


    Also I tried to enable/disable RadDateTimePicker control , but giving "Object Required" issue in following scenario. I am using "2009.3.1103.35" version.

    Scenario :-

    1. RadDateTimePicker is disable using follwoing code    
        

     

                    var objradDateValidity = $find("<%= radValidity.ClientID %>");

     

     

                    objradDateValidity.set_enabled(false);

    2. Then after some businees logic ,I make it enable as follows

                   var objradDateValidity = $find("<%= radValidity.ClientID %>");

     

     

                    objradDateValidity.set_enabled(true);

    3. And Now if I change date value using Date popup button and again try to make it disable , it throws "Object Required" error.

    4. If I dont change date value and try to make it disable, it does it without throwing any error.



    any help will be highly appreciated.

    Thanks,

    Ajay Khedekar
  2. Johny
    Johny avatar
    80 posts
    Member since:
    Aug 2008

    Posted 06 Jan 2010 Link to this post

    Hello Ajjay,

    To get the popup button element you can use the get_popupButton method of the picker client-side object. The following document provides more details:

    http://www.telerik.com/help/aspnet-ajax/calendar_clientsideraddatetimepicker.html

    In addition I tried the following code on my side and was not able to get any errors:

    <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <script type="text/javascript"
            var picker;  
            function pageLoad(sender, args) 
            { 
                picker = $find("<%= RadDateTimePicker1.ClientID %>"); 
            } 
            function Enable() 
            { 
                picker.set_enabled(true); 
            } 
            function Disable() 
            { 
                picker.set_enabled(false); 
            } 
            function Hide() 
            { 
                picker.get_popupButton().style.display = "none"
            } 
            function Show() 
            { 
                picker.get_popupButton().style.display = ""
            } 
         
        </script> 
     
        <telerik:RadDateTimePicker runat="server" ID="RadDateTimePicker1"
        </telerik:RadDateTimePicker> 
        <br /> 
        <input type="button" id="button1" onclick="Enable()" value="Enable" /><br /> 
        <input type="button" id="button2" onclick="Disable()" value="Disable" /><br /> 
        <input type="button" id="button3" onclick="Hide()" value="Hide popup" /><br /> 
        <input type="button" id="button4" onclick="Show()" value="Show popup" /> 

    Thanks,
    Johny
  3. Ajay Khedekar
    Ajay Khedekar avatar
    9 posts
    Member since:
    Jun 2009

    Posted 06 Jan 2010 Link to this post



    Thanks for prompt reply, it has solved my issue...

    highly appreciated...

    Thanks,
    Ajay



  4. Brad
    Brad avatar
    46 posts
    Member since:
    Dec 2008

    Posted 20 Feb 2010 Link to this post

    This is a little off this topic but after 2 hours of trying to find the exact topic I had decided to ask here.

    How do I move the date popup button CLOSER to the Date Input field? I have tried widths, alignment, properties, etc. and nothing. There just doesn't seem to be a way to get it closer. I'm working on a page for mobile devices where screen real estate is at a premium so I need to tighten up empty space and this is proving to be really difficult to do.

    joeb
  5. Dimo
    Admin
    Dimo avatar
    8450 posts

    Posted 23 Feb 2010 Link to this post

    Hello Joe,

    You can do two things:

    1. Remove/decrease the side margin of the popup button

    and/or

    2. Decrease the size of the popup button and sacrifice the hover effect

    Here is a simple demo:


    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    <style type="text/css">
     
    .MyPicker .rcTable a.rcCalPopup
    {
        margin:0 0 0 1px;
        width:16px;
        height:16px;
        background-position:-3px -3px;
    }
     
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <p>No customizations</p>
     
    <telerik:RadDatePicker ID="RadDatePicker2" runat="server" />
     
    <p>With customizations</p>
     
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" CssClass="MyPicker" />
     
    </form>
    </body>
    </html>


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