Style of Dateinput on the client

[mark]

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.

[Dimo]

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.

[mark]

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.

[Dimo]

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.

[mark]

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.

[Dimo]

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.