
Elin Tjhai
Top achievements
Rank 1
Elin Tjhai
asked on 20 Jul 2010, 01:32 AM
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,
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
16 Answers, 1 is accepted
0
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:
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
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
0

Jack
Top achievements
Rank 2
answered on 25 Jan 2013, 12:07 AM
That's great Veli, Thank you.
Do you know the CSS for doing this to the command item at the top please?
Cheers,
Jon
Do you know the CSS for doing this to the command item at the top please?
Cheers,
Jon
0

Princy
Top achievements
Rank 2
answered on 25 Jan 2013, 06:35 AM
Hi,
Try the following CSS.
CSS:
Hope this helps.
Regards,
Princy.
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.
0

Jack
Top achievements
Rank 2
answered on 25 Jan 2013, 06:44 AM
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
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
0
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
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.
0

Jack
Top achievements
Rank 2
answered on 30 Jan 2013, 12:03 AM
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
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
0

Jack
Top achievements
Rank 2
answered on 10 Feb 2013, 08:29 AM
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
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
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
0
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:
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
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.
0

Jack
Top achievements
Rank 2
answered on 13 Feb 2013, 08:20 AM
Hi Radoslav,
That's done it! Thank you very much.
Great support.
Jon
That's done it! Thank you very much.
Great support.
Jon
0

Roland
Top achievements
Rank 1
answered on 25 Feb 2013, 09:09 PM
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
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
0
Hello Roland,
You can round all edges with the following CSS rule
I hope this helps.
Greetings,
Galin
the Telerik team
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.
0

Roland
Top achievements
Rank 1
answered on 01 Mar 2013, 07:11 PM
Thanks Galin.
0

Daniel
Top achievements
Rank 1
answered on 17 Jul 2013, 10:10 PM
Is there a way to make just the bottom corners rounded?
0

Princy
Top achievements
Rank 2
answered on 18 Jul 2013, 03:14 AM
Hi Daniel,
Please apply the below CSS class to your grid to make bottom borders rounded.
CSS:
Thanks,
Princy
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
0

Marc
Top achievements
Rank 2
answered on 05 Jun 2014, 01:50 PM
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;
}
using:
.RadGrid
{
border-radius: 10px;
overflow: hidden;
}
0
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
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.