width of grid view boundfield

Question

I can not set the width of bound field. Is there any problem in the following markup.

 <asp:BoundField DataField="UserName" HeaderText="User Name"
                   meta:resourcekey="BoundFieldUNCUserNameResource1">
        <HeaderStyle Width="50%" />
 </asp:BoundField>

enter image description here

Please refer to the image. I set width using the following. The yellow colored numbers are corresponding width. The marked user name is always Wrapped even I set a width to a large value (say 50%) and set Wrap="false".

<HeaderStyle Width="20%" Wrap="true" />
<ItemStyle Width="20%" Wrap="true" />

score 36 · Accepted Answer · answered Jun 21 '11 at 05:50

36

Try This:

ItemStyle-Width="50%" ItemStyle-Wrap="false" in the BoundField tag

answered Jun 21 '11 at 05:50

Saurabh

5,661
2
26
32

1

ItemStyle-Width="120px" is not effective when Wrap="false". Why? – ZahidKakar Mar 18 '15 at 09:01
This seems to have no effect on asp:GridView. – ebyrob Mar 10 '17 at 14:46

score 9 · Answer 2 · answered Jun 21 '11 at 06:19

9

For BoundField:

 <asp:BoundField DataField="UserName" HeaderText="User Name" ItemStyle-Width="50px" />

answered Jun 21 '11 at 06:19

thevan

10,052
53
137
202

score 2 · Answer 3 · edited Jul 25 '17 at 15:06

It's amazing that even now, in 2016, the ItemStyle-Width and HeaderStyle-Width attributes usually get ignored in the ASP.Net GridView control.

Sometimes, they just seem to create no markup whatsoever.

My solution was to give up trying to set this attributes, and I resorted to using plain old CSS instead:

.AspNet-GridView table tbody tr td:nth-child(1)
{
    /*  Set the width of the 1st GridView column */
    width: 200px;
}
.AspNet-GridView table tbody tr td:nth-child(2)
{
    /*  Set the width of the 2nd GridView column */
    width: 300px;
}

score 0 · Answer 4 · answered Jan 30 '18 at 06:47

0

I am also facing this problem today. What i got is you must define ur width in css class & called that css class in boundfeild. e.g.

HeaderStyle-CssClass="width350"

answered Jan 30 '18 at 06:47

ibrahim shaikh

9
1
4

score 0 · Answer 5 · edited Sep 04 '18 at 08:12

0

To change column width gridview boundfield just add this inside boundfield

ItemStyle-Width="200"  ItemStyle-Wrap="False"

it worked for me, try this

edited Sep 04 '18 at 08:12

EstevaoLuis

2,422
7
33
40

answered Sep 04 '18 at 06:53

tabassum jahagirdar

11
1

score 0 · Answer 6 · answered Jun 29 '20 at 21:00

After trying several solutions with no luck, I was able to add a css class to the item. Seems like both HeaderStyle-CssClass and ItemStyle-CssClass attributes needed to be set:

    <asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-CssClass="Name" ItemStyle-CssClass="Name" />

width of grid view boundfield

6 Answers6