CODEWITHSUNDEEP
c#asp.netcssgridview
rawatdeepesh
rawatdeepesh

Reputation: 584

How can I change the shape of a gridview to circular?

How can I change the square shape of a GridView to circular or is it possible to display a gridview on a circular object or say an image?

I have tried to :- 

1-add cssclass to the gridview where css class had a line of code for a background image
2-applied headerclass css to the gridview and gave the image source there.
3-applied a backimage property to the Grid.
(the image in all the 3 cases was a circle)

css is

    .circle{ background:url(circle.png); opacity:0.5;height:176px;width:176px;}

and i m trying to insert the GridView in my aspx page in visual studio 10

But nothing seems to work the way i want . The GridView Cells were misaligned in first 2 cases.

Please suggest me a right way if possible.

Thanks in advance

Upvotes: 1

Views: 1411

Answers (1)

Yuriy Galanter
Yuriy Galanter

Reputation: 39777

You don't have to use an image, just use CSS to form a circle, for example

.circle {
    width: 320px;
    height: 320px;
    background: LightPink;
    -moz-border-radius: 160px;
    -webkit-border-radius: 160px;
    border-radius: 160x;
}

Also, don't change shape of the grid itself - it may cause misalignments. Place the grid inside of a DIV with above class applied.

Demo: http://jsfiddle.net/pnFGt/

Upvotes: 1

Related Questions