This is a migrated thread and some comments may be shown as answers.

Style of Dateinput on the client

5 Answers 162 Views
Input
This is a migrated thread and some comments may be shown as answers.
mark
Top achievements
Rank 1
mark asked on 27 Jan 2009, 05:49 AM
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.

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Jan 2009, 08:48 AM
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.
0
mark
Top achievements
Rank 1
answered on 27 Jan 2009, 06:56 PM
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.


0
Dimo
Telerik team
answered on 28 Jan 2009, 11:33 AM
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.
0
mark
Top achievements
Rank 1
answered on 29 Jan 2009, 02:21 AM
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.
0
Dimo
Telerik team
answered on 02 Feb 2009, 02:49 PM
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.
Tags
Input
Asked by
mark
Top achievements
Rank 1
Answers by
Dimo
Telerik team
mark
Top achievements
Rank 1
Share this question
or