13 Answers, 1 is accepted
0
Hi Håkan,
It is possible to decorate the datepicker's textbox by RadFormDecorator, if you remove all CSS classes, which are applied to the datepicker's textbox. This must be done programmatically like this:
protected void Page_PreRenderComplete(object sender, EventArgs e)
{
RadDateTimePicker5.DateInput.EnabledStyle.CssClass = String.Empty;
RadDateTimePicker5.DateInput.HoveredStyle.CssClass = String.Empty;
RadDateTimePicker5.DateInput.FocusedStyle.CssClass = String.Empty;
RadDateTimePicker5.DateInput.InvalidStyle.CssClass = String.Empty;
}
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
It is possible to decorate the datepicker's textbox by RadFormDecorator, if you remove all CSS classes, which are applied to the datepicker's textbox. This must be done programmatically like this:
protected void Page_PreRenderComplete(object sender, EventArgs e)
{
RadDateTimePicker5.DateInput.EnabledStyle.CssClass = String.Empty;
RadDateTimePicker5.DateInput.HoveredStyle.CssClass = String.Empty;
RadDateTimePicker5.DateInput.FocusedStyle.CssClass = String.Empty;
RadDateTimePicker5.DateInput.InvalidStyle.CssClass = String.Empty;
}
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Håkan
Top achievements
Rank 1
Rank 1
answered on 09 Dec 2008, 06:12 PM
Hi Dimo,
I have tried your solution and it works almost fine in IE7 except when you have a DatePopupButton visible the width property of the textbox does not work (when empty). Also it would be great if the InvalidStyle still could be used. In Firefox the RadFormDecorator does not decorate the datepicker's textbox at all (works fine on ordinary textboxes). Is there any other way this could be achieved? Not possible to make any javascript call to RadFormDecorator?
Thanks
0
Accepted
Hi Håkan,
RadFormDecorator currently does not support textboxes with their width set in percent. That's why you will need to set a width to the DateInput textbox with CSS using the !important clause.
The textbox was not styles in Firefox, because I erroneously disabled all CSS classes for the picker's textbox, but they are needed in all browsers, except IE.
I made some modifications to my test page and here we go:
Sincerely yours,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
RadFormDecorator currently does not support textboxes with their width set in percent. That's why you will need to set a width to the DateInput textbox with CSS using the !important clause.
The textbox was not styles in Firefox, because I erroneously disabled all CSS classes for the picker's textbox, but they are needed in all browsers, except IE.
I made some modifications to my test page and here we go:
| <%@ Page Language="C#" %> |
| <%@ Import Namespace="System.Data" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <script runat="server"> |
| protected void Page_PreRenderComplete(object sender, EventArgs e) |
| { |
| if (Request.Browser.IsBrowser("IE")) |
| { |
| RadDatePicker1.DateInput.EnabledStyle.CssClass = String.Empty; |
| RadDatePicker1.DateInput.HoveredStyle.CssClass = String.Empty; |
| RadDatePicker1.DateInput.FocusedStyle.CssClass = String.Empty; |
| RadDatePicker1.DateInput.InvalidStyle.CssClass = String.Empty; |
| } |
| else |
| { |
| RadDatePicker1.DateInput.EnabledStyle.CssClass = "radfd_input"; |
| RadDatePicker1.DateInput.HoveredStyle.CssClass = "radfd_input"; |
| RadDatePicker1.DateInput.FocusedStyle.CssClass = "radfd_input"; |
| RadDatePicker1.DateInput.InvalidStyle.CssClass = "radfd_input"; |
| } |
| } |
| </script> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| <title>RadControls for ASP.NET AJAX</title> |
| <style type="text/css"> |
| .rcInputCell span input{width:120px !important} /*the picker's width - 20*/ |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Textbox" Skin="Vista" /> |
| <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Default" Width="140px" /> |
| </form> |
| </body> |
| </html> |
Sincerely yours,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Boone
Top achievements
Rank 2
Rank 2
answered on 26 Dec 2008, 09:53 PM
Is this going to be fixed in the near future? I really like how easy it is to use the formdecorator but this is a huge work around especially if you have multiple date fields on a page.
0
Hi Boone,
We will do our best to extend the RadFormDecorator to decorate RadTextBox and RadDatePicker controls for the coming Q1 2009 scheduled for late February.
Sincerely yours,
Tervel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
We will do our best to extend the RadFormDecorator to decorate RadTextBox and RadDatePicker controls for the coming Q1 2009 scheduled for late February.
Sincerely yours,
Tervel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Stephen Dangerfield
Top achievements
Rank 1
Rank 1
answered on 05 Apr 2009, 09:15 AM
Hi,
has this been fixed? I am using Q1 2009 and ran the sample here and it didn't work.
Also rounded corners by form decorator seen to be not working on date pickers at all still..
Any work around?
Steve
has this been fixed? I am using Q1 2009 and ran the sample here and it didn't work.
Also rounded corners by form decorator seen to be not working on date pickers at all still..
Any work around?
Steve
0
Hi Stephen,
In the newest version you need to change the workaround in this way :
Due to fixes and features with higher priority, we've had to postpone that feature for a future update.
Greetings,
Fiko
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
In the newest version you need to change the workaround in this way :
| protected void Page_PreRenderComplete(object sender, EventArgs e) |
| { |
| if (Request.Browser.IsBrowser("IE")) |
| { |
| RadDatePicker1.DateInput.EnabledStyle.CssClass = String.Empty; |
| RadDatePicker1.DateInput.HoveredStyle.CssClass = String.Empty; |
| RadDatePicker1.DateInput.FocusedStyle.CssClass = String.Empty; |
| RadDatePicker1.DateInput.InvalidStyle.CssClass = String.Empty; |
| } |
| else |
| { |
| RadDatePicker1.DateInput.EnabledStyle.CssClass = "rfdInput rfdRoundedCorners"; |
| RadDatePicker1.DateInput.HoveredStyle.CssClass = "rfdInput rfdRoundedCorners"; |
| RadDatePicker1.DateInput.FocusedStyle.CssClass = "rfdInput rfdRoundedCorners"; |
| RadDatePicker1.DateInput.InvalidStyle.CssClass = "rfdInput rfdRoundedCorners"; |
| } |
| } |
Due to fixes and features with higher priority, we've had to postpone that feature for a future update.
Greetings,
Fiko
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 01 Jun 2009, 02:25 PM
It didn't make it in to SP2 either.
--
Stuart
--
Stuart
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 01 Jun 2009, 02:32 PM
Is there a way of getting the rounded corners on the inputs used as the filer selectors in RadUpload?
--
Stuart
--
Stuart
0
Hi Stuart,
Unfortunately there's currently no easy way to do that in IE and Opera because the whole input gets replaced and that messes up RadUpload's event handling. In Firefox and Safari/Chrome it is quite easy though. You only need to add the RadFormDecorator rounded corners CSS class to the inputs, like this:
function pageLoad() {
$telerik.$('.ruFakeInput').addClass('rfdRoundedCorners');
}
Sincerely yours,
Kamen Bundev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Unfortunately there's currently no easy way to do that in IE and Opera because the whole input gets replaced and that messes up RadUpload's event handling. In Firefox and Safari/Chrome it is quite easy though. You only need to add the RadFormDecorator rounded corners CSS class to the inputs, like this:
function pageLoad() {
$telerik.$('.ruFakeInput').addClass('rfdRoundedCorners');
}
Sincerely yours,
Kamen Bundev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 05 Jun 2009, 10:33 AM
That's a shame as it effectively renders the FormDecorator U/S. Having some controls with rounded corners but not others looks naff so TPTB won't accept it.
--
Stuart
--
Stuart
0
Hi Stuart,
We are considering adding rounded corners to RadUpload due to its more complicated nature. In the mean time you can use the following workaround to add rounded corners to RadUpload when RadFormDecorator is present on the page (done with border-radius in modern browsers and with VML in IE6/7/8). Add this CSS to the page:
<style type="text/css">
v\:roundrect
{
color: #FFF;
display: inline-block;
background-color: #FFF;
position: absolute;
z-index: 0;
behavior:url(#default#VML);
/background-color:transparent;
}
</style>
And this javascript towards the end of the page (you should also include jQuery in the RadScriptManager like shown here):
<script type="text/javascript">
var $ = $telerik.$;
function ClientAdded(element, row) {
$('.ruFakeInput', row.get_row()).addClass('rfdRoundedCorners');
if ($telerik.isIE)
addRoundedBordersIE($('.ruFakeInput', row.get_row()));
}
function addRoundedBordersIE(el) {
var borderRadius = el.css('-moz-border-radius');
if ($telerik.isIE6)
borderRadius = el.css('moz-border-radius');
if (borderRadius) {
var pheight = Math.ceil(parseInt(borderRadius) / el.height() * 100);
var roundedRect = $('<v:roundrect> </v:roundrect>');
roundedRect.css('width', el.outerWidth());
roundedRect.css('height', el.outerHeight());
roundedRect.attr('arcsize', pheight + '%');
roundedRect.attr('fillcolor', el.css('background-color'));
roundedRect.attr('strokecolor', el.css('border-top-color'));
el.parent().prepend(roundedRect);
el.height(parseInt(el.height()) + parseInt(el.css('border-top-width')) + parseInt(el.css('border-bottom-width')));
el.width(parseInt(el.width()) + parseInt(el.css('border-left-width')) + parseInt(el.css('border-right-width')));
el.css('border', 0);
el.css('position', 'relative');
el.css('background', 'none');
}
}
function pageLoad() {
$('.ruFakeInput').addClass('rfdRoundedCorners');
if ($telerik.isIE) {
if (!document.namespaces['v'])
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');
}
}
</script>
Finally set RadUpload's OnClientAdded to point to the ClientAdded function.
This should give you rounded corners for the RadUpload inputs in all major browsers excluding Opera.
Greetings,
Kamen Bundev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
We are considering adding rounded corners to RadUpload due to its more complicated nature. In the mean time you can use the following workaround to add rounded corners to RadUpload when RadFormDecorator is present on the page (done with border-radius in modern browsers and with VML in IE6/7/8). Add this CSS to the page:
<style type="text/css">
v\:roundrect
{
color: #FFF;
display: inline-block;
background-color: #FFF;
position: absolute;
z-index: 0;
behavior:url(#default#VML);
/background-color:transparent;
}
</style>
And this javascript towards the end of the page (you should also include jQuery in the RadScriptManager like shown here):
<script type="text/javascript">
var $ = $telerik.$;
function ClientAdded(element, row) {
$('.ruFakeInput', row.get_row()).addClass('rfdRoundedCorners');
if ($telerik.isIE)
addRoundedBordersIE($('.ruFakeInput', row.get_row()));
}
function addRoundedBordersIE(el) {
var borderRadius = el.css('-moz-border-radius');
if ($telerik.isIE6)
borderRadius = el.css('moz-border-radius');
if (borderRadius) {
var pheight = Math.ceil(parseInt(borderRadius) / el.height() * 100);
var roundedRect = $('<v:roundrect> </v:roundrect>');
roundedRect.css('width', el.outerWidth());
roundedRect.css('height', el.outerHeight());
roundedRect.attr('arcsize', pheight + '%');
roundedRect.attr('fillcolor', el.css('background-color'));
roundedRect.attr('strokecolor', el.css('border-top-color'));
el.parent().prepend(roundedRect);
el.height(parseInt(el.height()) + parseInt(el.css('border-top-width')) + parseInt(el.css('border-bottom-width')));
el.width(parseInt(el.width()) + parseInt(el.css('border-left-width')) + parseInt(el.css('border-right-width')));
el.css('border', 0);
el.css('position', 'relative');
el.css('background', 'none');
}
}
function pageLoad() {
$('.ruFakeInput').addClass('rfdRoundedCorners');
if ($telerik.isIE) {
if (!document.namespaces['v'])
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');
}
}
</script>
Finally set RadUpload's OnClientAdded to point to the ClientAdded function.
This should give you rounded corners for the RadUpload inputs in all major browsers excluding Opera.
Greetings,
Kamen Bundev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 11 Jun 2009, 08:49 AM
Wow. Thanks Kamen. That's unpleasant, isn't it.
But thanks again for the work around.
I look forwards to a time when all of the RadControls honour a request for rounded corners.
--
Stuart
But thanks again for the work around.
I look forwards to a time when all of the RadControls honour a request for rounded corners.
--
Stuart