Rounded Corner on RadGrid Header

17 posts, 0 answers
  1. Elin Tjhai
    Elin Tjhai avatar
    1 posts
    Member since:
    Feb 2010

    Posted 19 Jul 2010 Link to this post

    Hello,

    I'd like to make a rounded corner for the radgrid header. Is there a way to do it?
    I have changed the css on the rgMasterTable thead to be the background image and set .rgMasterTable th.rgExpandCol as the background image. However, it makes the column header to be blank.
    Example,

    .RadGrid_VCGrid

     

    .rgMasterTable thead

     

    {

    background

     

    : url('../images/tabletop-bk.png') left repeat-x;

     

    }


    .RadGrid_VCGrid

     

    .rgMasterTable th.rgExpandCol

     

    {

     

    background: url('../images/tabletop-left-bk.png') left top no-repeat;

     

     

     

    }

    Please advise

    Elin

  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 22 Jul 2010 Link to this post

    Hello Elin,

    You can use some CSS 3 for rounded corners in Firefox, Safari, Chrome and Opera. The following CSS will make the top left and top right RadGrid borders rounded with a radius of 10 pixels:

    div.RadGrid,
    div.RadGrid table.rgMasterTable thead
    {
        -moz-border-radius: 10px 10px 0 0;
        -webkit-border-radius: 10px 10px 0 0;
        border-radius: 10px 10px 0 0;
    }
             
    div.RadGrid table.rgMasterTable thead th.rgHeader:first-child
    {
        -moz-border-radius:10px 0 0 0;
        -webkit-border-radius:10px 0 0 0;
        border-radius:10px 0 0 0;
    }
             
    div.RadGrid table.rgMasterTable thead th.rgHeader:last-child
    {
        -moz-border-radius:0 10px 0 0;
        -webkit-border-radius:0 10px 0 0;
        border-radius:0 10px 0 0;
    }

    The result is shown in the attached screen shot.

    Unfortunately, none of the IE versions currently support CSS3 (except for IE9 preview), that is why the CSS approach will not work for IE.

    Regards,
    Veli
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 24 Jan 2013 Link to this post

    That's great Veli, Thank you.

    Do you know the CSS for doing this to the command item at the top please?

    Cheers,

    Jon

  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Jan 2013 Link to this post

    Hi,

    Try the following CSS.

    CSS:
    <style type="text/css">
        div.RadGrid, div.RadGrid table.rgMasterTable thead
        {
            -moz-border-radius: 10px 10px 0 0;
            -webkit-border-radius: 10px 10px 0 0;
            border-radius: 10px 10px 0 0;
        }
    </style>

    Hope this helps.

    Regards,
    Princy.
  6. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 25 Jan 2013 Link to this post

    Thank Princy,

    That works on the header column but if I have a command item above it (Add New Record) - It only rounds the header that is below it.

    Cheers,

    Jon

  7. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 29 Jan 2013 Link to this post

    Hi Jon,

    I tried the code provided from Princy ant it works as expected. I am sending you a simple example which uses the provided code snippet. Please check it out and let me know what differs in your case.

    Looking forward for your reply.

    Regards,
    Radoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 29 Jan 2013 Link to this post

    Thank you Radoslav,

    Yes your sample works fine but I can see now what is different on my page.

    I am setting a backcolor to the command item
     <CommandItemStyle  BackColor="#444444"  />

    This then appears to stop the rounded corners.
    if I apply this same CSS to just the header row alone (no command item) it works.

    Cheers,

    Jon
  9. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 10 Feb 2013 Link to this post

    Just looking at this one again...
    Setting a background color to the header style also stops the rounded corners.
    Putting this CSS in fixes the header Style

    <style type="text/css">
     
    div.RadGrid,
    div.RadGrid table.rgMasterTable thead
    {
        -moz-border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
              
    div.RadGrid table.rgMasterTable thead th.rgHeader:first-child
    {
        -moz-border-radius:5px 0 0 0;
        -webkit-border-radius:5px 0 0 0;
        border-radius:5px 0 0 0;
    }
              
    div.RadGrid table.rgMasterTable thead th.rgHeader:last-child
    {
        -moz-border-radius:0 5px 0 0;
        -webkit-border-radius:0 5px 0 0;
        border-radius:0 5px 0 0;
    }
     
    </style>

    However it doesn't fix the command item when at the top.
    Please see the effect on the attached image.
    Is it possible please - Or have I got it all wrong?

    Cheers,

    Jon
  10. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 13 Feb 2013 Link to this post

    Hello Jon,

    To achieve the desired functionality you need to remove the
     <CommandItemStyle  BackColor="#444444"  /> line from you code and to set the background color and border radius with css styles:
    <style type="text/css">
     
            div.RadGrid
            {
                 border-radius: 10px 10px 0 0;
            }
     
            .rgCommandRow .rgCommandCell
            {
                border-radius: 10px 10px 0 0;
                background-color: #444444;
            }
        </style>

    Additionally I am sending you the modified version of the example. Please check it out and let me know if I helps you.

    Looking forward for your reply.

    Greetings,
    Radoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 13 Feb 2013 Link to this post

    Hi Radoslav,

    That's done it! Thank you very much.
    Great support.

    Jon
  12. Roland
    Roland avatar
    11 posts
    Member since:
    Mar 2007

    Posted 25 Feb 2013 Link to this post

    Hi there.

    Great thread. Anyone have the style items to modify to do this for the footer as well? Assume either with or without a pager.

    Thanks.

    Roland
  13. Galin
    Admin
    Galin avatar
    526 posts

    Posted 28 Feb 2013 Link to this post

    Hello Roland,

    You can round all edges with the following CSS rule

    .RadGrid
    {
        border-radius: 10px;
        overflow: hidden;
    }

    I hope this helps.

    Greetings,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  14. Roland
    Roland avatar
    11 posts
    Member since:
    Mar 2007

    Posted 01 Mar 2013 Link to this post

    Thanks Galin.
  15. Daniel
    Daniel avatar
    3 posts
    Member since:
    Jul 2013

    Posted 17 Jul 2013 Link to this post

    Is there a way to make just the bottom corners rounded?
  16. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2013 Link to this post

    Hi Daniel,

    Please apply the below CSS class to your grid to make bottom borders rounded.

    CSS:
    <style type="text/css">
       .RadGrid_Default
        {
          border-radius: 0 0 10px 10px;
        }
    </style>

    Thanks,
    Princy
  17. Marc
    Marc avatar
    1 posts
    Member since:
    Jun 2014

    Posted 05 Jun 2014 Link to this post

    My RadGrid instance has rounded corners when running on my local machine, but when running on the server, the corners are not rounded. All the web app files (including css files) have been copied out to the server. Suggestions? Thanks!

    using:
    .RadGrid
    {
    border-radius: 10px;
    overflow: hidden;
    }
  18. Galin
    Admin
    Galin avatar
    526 posts

    Posted 10 Jun 2014 Link to this post

    Hi Marc,

    Based on the provided information I suppose you open the both pages in different browser modes of Internet Explorer. This CSS solution works only in modern browsers.

    However I suggest you this cross-browser solution, which is showed in the following demo page

    http://demos.telerik.com/aspnet-ajax/grid/examples/styles/rounded-corners/defaultcs.aspx

    I hope this helps.

    Regards,
    Galin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017