Rounded Corner on RadGrid Header

[Elin Tjhai]

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

[Veli]

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

[Jack]

That's great Veli, Thank you.

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

Cheers,

Jon

[Princy]

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.

[Jack]

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

[Radoslav]

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

[Jack]

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

[Jack]

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

[Radoslav]

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

[Jack]

Hi Radoslav,

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

Jon

[Roland]

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

[Galin]

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

[Roland]

Thanks Galin.

[Daniel]

Is there a way to make just the bottom corners rounded?

[Princy]

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

[Marc]

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;
}

[Galin]

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