Style of Dateinput on the client

6 posts, 0 answers
  1. mark
    mark avatar
    41 posts
    Member since:
    Sep 2006

    Posted 26 Jan 2009 Link to this post

    Hey there,
    I'm trying to do the following but I can't seem to make it work:
    var InputID = '<%= RadDateInput1.ClientID %>'
    var Input = document.getElementById(InputID); 
    if(Input) { Input.style.display = ''; } 
    Am I missing something??
    Thanks in advance for any help.
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 27 Jan 2009 Link to this post

    Hello mark,

    The ID of the RadDateInput textbox is not the same as the ID of the control. There are several reasons for that, which are related to the control's functionality.

    You can use

    var Input = document.getElementById(InputID + "_text");


    All the best,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mark
    mark avatar
    41 posts
    Member since:
    Sep 2006

    Posted 27 Jan 2009 Link to this post

    Hey Dimo,
    Thanks a lot for the prompt answer. I tried the following and I have a new problem
    var lblID = '<%= lbl1.ClientID %>'
    var lbl = document.getElementById(lblID); 
    if(lbl) { lbl.style.display = ''; } 
                         
    var InputID = '<%= RadDateInput1.ClientID %>';  
    var Input = document.getElementById(InputID + "_text");  
    if(Input) { Input.style.display = ''; } 

    The label control appears with no problem, however the dateinput controls appears just to disappear right after I move the mouse.


  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Jan 2009 Link to this post

    Hello Mark,

    Try hiding the whole DateInput control, not just the textbox:

    var InputID = '<%= RadDateInput1.ClientID %>'; 
    var Input = document.getElementById(InputID + "_wrapper"); 
    if(Input) { Input.style.display = ''; }


    Greetings,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. mark
    mark avatar
    41 posts
    Member since:
    Sep 2006

    Posted 28 Jan 2009 Link to this post

    Hello Dimo,
    InputID + "_wrapper" is not solving the problem.
    I was doing this:
    <telerik:RadDateInput ID="RadDateInput1" runat="server" Skin="Default" DisplayDateFormat="dd/MM/yyyy" 
                style="display:none;" 
                MaxDate="2011-01-01" MinDate="1930-01-01" ToolTip="<%$ Resources:Resource, DateTooltip %>" 
                Width="100px"  Height="12px" EmptyMessage="<%$ Resources:Resource, DateFormat %>"
            <ClientEvents OnError="onError" /> 
    </telerik:RadDateInput> 
    and when I do this:
    var InputID = '<%= RadDateInput1.ClientID %>';   
    var Input = document.getElementById(InputID + "_text");   
    if(Input) { Input.style.display = ''; }  
    the input appears and disappears when I hover over it (Is there a style onhover I should change too?)
    I was able to make it work by adding an onload event for the input and setting its display to none through javascript instead of just setting the style in html
    function OnValueChanged() 
    {    
        var InputID = '<%= RadDateInput1.ClientID %>';  
        var Input = document.getElementById(InputID + "_Text");  
        if(Input) { Input.style.display = ""; }  
    function Onload() 
        var InputID = '<%= RadDateInput1.ClientID %>';  
        var Input = document.getElementById(InputID + "_Text");  
        if(Input) { Input.style.display = "none"; }  
    However, I have 5 inputs like this and I don't think it's the most elegant way to go about it.

    Thanks again for the help.
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 02 Feb 2009 Link to this post

    Hello Mark,

    I didn't realize that you wanted the DateInput control to be initially not visible. Indeed, in this case the visibility toggling on the client is not that easy (and ellegant) to achieve, unless you place the RadDateInput inside some other element (e.g. a <div> or <span>) and toggle its visibility instead.

    "the input appears and disappears when I hover over it" - this is because the control remembers its initial style settings and they are reapplied onmouseover, mouseout, focus, etc. Otherwise the custom styles set on the server would be lost, which is not expected.

    Generally, when you want to change the inline textbox styles, you should do it in a special way and call updateCssClass() afterwards. Here is an example:

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

    Kind regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017