RadDatePicker - how do you hide textbox?

11 posts, 1 answers
  1. B
    B avatar
    42 posts
    Member since:
    Jan 2010

    Posted 04 Oct 2010 Link to this post

    I would like to hide the textbox on the RadDatePicker so that only the popup (calendar) Icon is displayed.  I tried settings RadDatePicker.DateInput.Visible =false....which hides the textbox, but it also seems to disable the popup button because when i click it the calendar is not displayed.  Am i missing something?  Thanks in advance.
  2. Answer
    Daniel
    Admin
    Daniel avatar
    4945 posts

    Posted 04 Oct 2010 Link to this post

    Hello,

    Please examine the following code-library project:
    How to Use RadDateTimePicker Without a Textbox And Popup Buttons

    Kind regards,
    Daniel
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. B
    B avatar
    42 posts
    Member since:
    Jan 2010

    Posted 04 Oct 2010 Link to this post

    got it.  that helped a lot.  thanks!
  5. Manav
    Manav avatar
    25 posts
    Member since:
    Oct 2010

    Posted 21 Oct 2010 Link to this post

    How do i do this in javascript?
    I have a panel which has a checkbox and a raddatepicker
    when i set the panel with
    .visibility = "none"

    .style.display = "none"    
    but the datepicker still stays there.


     

  6. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 21 Oct 2010 Link to this post

    Hello Mark,

    There is no such thing as "visibility:none". The correct CSS style is visibility:hidden.

    Are you saying that after applying a display:none style to the datepicker's container, the checkbox disappears, but the datepicker remains visible? Can you demonstrate this in a simple code snippet?

    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
  7. Manav
    Manav avatar
    25 posts
    Member since:
    Oct 2010

    Posted 21 Oct 2010 Link to this post

    basically i am trying to hide the datepicker based on the value of another control and i have tried using

     


    $get(ControlClientID).style.display =

    "";

     

    $get(ControlClientID).style.display = "none";


    and also used

     

    $get(ControlClientID).style.visibility= "hidden";

    $get(ControlClientID).style.visibility= "visible";

    but the datepicker still stays on the screen

     

  8. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 21 Oct 2010 Link to this post

    Hello Mark,

    You should use

    $find( PickerClientID ).set_visible( false ); // or true

    PickerClientID is the ID of a <input> element, which is never seen on the screen, and the control's client object is attached to it. So manipulating this element's styles will lead to nothing.

    Best wishes,
    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
  9. Manav
    Manav avatar
    25 posts
    Member since:
    Oct 2010

    Posted 21 Oct 2010 Link to this post

    Hello Dimo,
      It comes back with an error saying object does not support this property or method
    I have a Raddatepicker object which contains dateinput and calender items.
    so by the <input> element do you mean the dateinput element.

    what i have done is that i have got the clientid of the datepicker and dateinput id and tried using your said method on both the controls but to no use. both come back with the same error.

    Another interesting thing. these controls are inside a panel which If i hide/unhide from the codebehind the datepicker and all my other controls within my panel get hidden.

    however, when i do this using javascript i.e. setting the panel visibility to false, the raddatepicker still stays on the screen
  10. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 25 Oct 2010 Link to this post

    Hi Mark,

    Please inspect the sample below and compare with your implementation. Note that the control cannot be initially hidden (with the Visible="false" property), because it will not be rendered on the page at all and you will not be able to show it, unless you use an AJAX request.

    >> "so by the <input> element do you mean the dateinput element."

    No, I mean an <input> HTML element. See the following page for more information about the RadDate(Time)Picker HTML output:

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

    >> "these controls are inside a panel which If i hide/unhide from the codebehind the datepicker and all my other controls within my panel get hidden."

    Yes, this is because the controls are not rendered on the client at all.


    <%@ 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>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <asp:Button ID="Button1" runat="server" Text="toggle picker visibility" OnClientClick="return togglePickerVisibility()" />
     
    <br /><br />
     
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" />
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
     
    function togglePickerVisibility()
    {
        var picker = $find("<%= RadDatePicker1.ClientID %>");
        picker.set_visible(!picker.get_visible());
     
        return false;
    }
     
    </script>
    </telerik:RadCodeBlock>
     
    </form>
    </body>
    </html>


    All the best,
    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
  11. JH
    JH avatar
    12 posts
    Member since:
    Jul 2008

    Posted 23 Apr 2015 in reply to Dimo Link to this post

    Hi,

    What is the recommended way of hiding it in the lightweight rendering mode?
    When using Classic, this simple class worked fine for me.

    .HiddenDateInput .rcInputCell {
        display: none;
    }

     Thx

  12. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 29 Apr 2015 Link to this post

    Hi JH,

    For Lightweight rendering the rendering is changed so you can't rely on the same styles. You can use for example this CSS rule:

    .HiddenDateInput .riTextBox {
        display: none;
    }


    Regards,
    Venelin
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017