RadDatePicker rounded corners

14 posts, 1 answers
  1. Håkan
    Håkan avatar
    9 posts
    Member since:
    Dec 2008

    Posted 09 Dec 2008 Link to this post

    Is it possible to decorate the RadDatePicker textbox with the same rounded corners as the textboxes which RadFormDecorator has decorated (skin=Hay) so that they have identical appearance?

    Thanks
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Dec 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Håkan
    Håkan avatar
    9 posts
    Member since:
    Dec 2008

    Posted 09 Dec 2008 Link to this post

    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

  5. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 Dec 2008 Link to this post

    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:

    <%@ 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.
  6. Boone
    Boone avatar
    47 posts
    Member since:
    May 2008

    Posted 26 Dec 2008 Link to this post

    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.
  7. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 29 Dec 2008 Link to this post

    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.
  8. Stephen Dangerfield
    Stephen Dangerfield avatar
    1 posts
    Member since:
    Feb 2006

    Posted 05 Apr 2009 Link to this post

    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
  9. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 07 Apr 2009 Link to this post

    Hi Stephen,

    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.
  10. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 01 Jun 2009 Link to this post

    It didn't make it in to SP2 either.

    --
    Stuart
  11. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 01 Jun 2009 Link to this post

    Is there a way of getting the rounded corners on the inputs used as the filer selectors in RadUpload?

    --
    Stuart
  12. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 05 Jun 2009 Link to this post

    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.
  13. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 05 Jun 2009 Link to this post

    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
  14. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Jun 2009 Link to this post

    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>&nbsp;</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.
  15. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 11 Jun 2009 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017