I've searched the forums and tried a few of the suggestions to fix the issue I'm having, but I'm not having any luck. I need for the RadDatePicker to look like a LinkButton, where it's just the Date (January 1, 2010) underlined and when clicked, shows the RadCalendar. I have that part working thanks to another forum post, but the width of the RadDatePicker is causing problems. The goal is to have something like:
January 1, 2010 to February 1, 2010
Both dates are RadDatePickers. However, I can't find a way to automatically set the width of the RadDatePicker, so it ends up looking like:
January 1, 2010 to February 1, 2010
Hard-coding the width wouldn't seem to be a practical solution due to localization concerns. Any ideas? I've created a sample page that demonstrates the problem:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css" media="all">
.RadInput_Default .riTextBox
{
border: 0px solid orange !important; /*changing the border to 1px will show all the extra whitespace/padding*/
background: none transparent !important;
text-decoration: underline !important;
}
</style>
</head>
<body style="background-color: #cdcdcd">
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />
<telerik:RadDatePicker id="RadDatePicker1" runat="server" Skin="Default" SelectedDate="2009-04-06">
<DateInput ID="DateInput1" runat="server" onclick="ToggleFirstPopup()" DateFormat="MMMM d, yyyy" />
<DatePopupButton Visible="False" />
</telerik:RadDatePicker>
<asp:Label runat="server" ID="lblTo" Text="To"></asp:Label>
<telerik:RadDatePicker id="RadDatePicker2" runat="server" Skin="Default" SelectedDate="2009-04-06">
<DateInput ID="DateInput2" runat="server" onclick="ToggleSecondPopup()" DateFormat="MMMM d, yyyy" />
<DatePopupButton Visible="False" />
</telerik:RadDatePicker>
<script type="text/javascript">
function ToggleFirstPopup()
{
$find("<%= RadDatePicker1.ClientID %>").showPopup();
}
function ToggleSecondPopup()
{
$find("<%= RadDatePicker2.ClientID %>").showPopup();
}
</script>
</form>
</body>
</html>
Thanks,
Tye
1 Answer, 1 is accepted
0
Accepted
Hello Tye,
You want to make a textbox resize automatically according to its content, which is impossible.
I suggest you to use RadDatePickers with hidden textboxes and popup buttons, and display their values in separate controls - asp:Labels or asp:LinkButtons. Here is a similar demo:
http://www.telerik.com/community/code-library/aspnet-ajax/calendar/how-to-use-raddatetimepicker-without-a-textbox-and-popup-buttons.aspx
Use the second example ("Hide the TextBox and Popup Buttons") and place some text control next to each picker on your page. Subscribe to each picker's DateInput ValueChanged client event and use the handler to pass the hidden textbox' value to the text control:
<telerik:RadDateTimePicker>
<DateInput ClientEvents-OnValueChanged="passTextValue" />
</telerik:RadDateTimePicker><asp:Label ID="Label1" runat="server" />
Javascript:
function passTextValue(sender, args)
{
window.setTimeout(function(){$get("Label1").innerHTML = sender.get_textBoxValue();}, 1);
}
Best wishes,
Dimo
the Telerik team
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
You want to make a textbox resize automatically according to its content, which is impossible.
I suggest you to use RadDatePickers with hidden textboxes and popup buttons, and display their values in separate controls - asp:Labels or asp:LinkButtons. Here is a similar demo:
http://www.telerik.com/community/code-library/aspnet-ajax/calendar/how-to-use-raddatetimepicker-without-a-textbox-and-popup-buttons.aspx
Use the second example ("Hide the TextBox and Popup Buttons") and place some text control next to each picker on your page. Subscribe to each picker's DateInput ValueChanged client event and use the handler to pass the hidden textbox' value to the text control:
<telerik:RadDateTimePicker>
<DateInput ClientEvents-OnValueChanged="passTextValue" />
</telerik:RadDateTimePicker><asp:Label ID="Label1" runat="server" />
Javascript:
function passTextValue(sender, args)
{
window.setTimeout(function(){$get("Label1").innerHTML = sender.get_textBoxValue();}, 1);
}
Best wishes,
Dimo
the Telerik team
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.