ASP.NET Setting width of DataBound column in GridView

Question

I have a GridView which uses BoundField for columns. I am trying to set a maxwidth for my UserInfo column.

I have tried many many ways but non of them work. Below is the code for my GridView :

<asp:GridView ID="GridView1" AutoGenerateEditButton="True" 
ondatabound="gv_DataBound" runat="server" DataSourceID="SqlDataSource1"
AutoGenerateColumns="False">

<Columns>
                <asp:BoundField HeaderText="UserId" 
                DataField="UserId" 
                SortExpression="UserId"></asp:BoundField>

                <asp:BoundField HeaderText="Username" 
                DataField="Username" 
                SortExpression="Username"></asp:BoundField>

                <asp:BoundField HeaderText="UserInfo" 
                DataField="UserInfo" 
                SortExpression="UserInfo"></asp:BoundField>

                </Columns>
</asp:GridView>

Looking for suggestions on how I can set the width of a specific column, which is my UserInfo column.

in css property of that just give "width:auto" It will expand the column automatically — user2031620, Feb 01 '13 at 07:02

score 23 · Accepted Answer · answered Nov 25 '11 at 09:20

I did a small demo for you. Demonstrating how to display long text.

In this example there is a column Name which may contain very long text. The boundField will display all content in a table cell and therefore the cell will expand as needed (because of the content)

The TemplateField will also be rendered as a cell BUT it contains a div which limits the width of any contet to eg 40px. So this column will have some kind of max-width!

    <asp:GridView ID="gvPersons" runat="server" AutoGenerateColumns="False" Width="100px">
        <Columns>
            <asp:BoundField HeaderText="ID" DataField="ID" />
            <asp:BoundField HeaderText="Name (long)" DataField="Name">
                <ItemStyle Width="40px"></ItemStyle>
            </asp:BoundField>
            <asp:TemplateField HeaderText="Name (short)">
                <ItemTemplate>
                    <div style="width: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                        <%# Eval("Name") %>
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

enter image description here

Here is my demo codeBehind

 public partial class gridViewLongText : System.Web.UI.Page
 {
     protected void Page_Load(object sender, EventArgs e)
     {
         #region init and bind data
         List<Person> list = new List<Person>();
         list.Add(new Person(1, "Sam"));
         list.Add(new Person(2, "Max"));
         list.Add(new Person(3, "Dave"));
         list.Add(new Person(4, "TabularasaVeryLongName"));
         gvPersons.DataSource = list;
         gvPersons.DataBind();
         #endregion
     }
 }

 public class Person
 {
     public int ID { get; set; }
     public string Name { get; set; }

     public Person(int _ID, string _Name)
     {
         ID = _ID;
         Name = _Name;
     }
 }

score 7 · Answer 2 · answered Nov 25 '11 at 08:54

7

add HeaderStyle in your bound field:

    <asp:BoundField HeaderText="UserId"
                DataField="UserId" 
                SortExpression="UserId">

                <HeaderStyle Width="200px" />

</asp:BoundField>

answered Nov 25 '11 at 08:54

GBK

375
2
4
11

Thanks, but it does not seem to work. My column still extends vertically due to the long input – gymcode Nov 25 '11 at 08:56
Works for me, thanks. Nice clean, simple solution. – Zeek2 Feb 19 '21 at 09:29

score 4 · Answer 3 · answered Nov 25 '11 at 08:59

4

Width can be set to specific column as below: By percentages:

<asp:BoundField HeaderText="UserInfo"  DataField="UserInfo"  
SortExpression="UserInfo" ItemStyle-Width="100%"></asp:BoundField>

OR

By pixel:

<asp:BoundField HeaderText="UserInfo"  DataField="UserInfo"  
SortExpression="UserInfo" ItemStyle-Width="500px"></asp:BoundField>

answered Nov 25 '11 at 08:59

Elias Hossain

4,410
1
19
33

where does the percentage get the value from? percentage of value from? – gymcode Nov 25 '11 at 08:59
1

Do you need to set the width dynamically? Thanks for your time. – Elias Hossain Nov 25 '11 at 10:47

score 1 · Answer 4 · edited Sep 12 '13 at 10:49

1

This is going to work for all situations while working with width.

`<asp:TemplateField HeaderText="DATE">
   <ItemTemplate>
   <asp:Label ID="Label1" runat="server" Text='<%# Bind("date") %>' Width="100px"></asp:Label>
   </ItemTemplate>
  </asp:TemplateField>`

edited Sep 12 '13 at 10:49

Raghavendra Devraj

457
5
16

answered Jul 14 '13 at 13:09

Gyaneshwar Rao N

51
6

score 0 · Answer 5 · answered Nov 25 '11 at 09:00

0

<asp:GridView ID="GridView1" AutoGenerateEditButton="True" 
ondatabound="gv_DataBound" runat="server" DataSourceID="SqlDataSource1"
AutoGenerateColumns="False" width="600px">

<Columns>
                <asp:BoundField HeaderText="UserId" 
                DataField="UserId" 
                SortExpression="UserId" ItemStyle-Width="400px"></asp:BoundField>
   </Columns>
</asp:GridView>

answered Nov 25 '11 at 09:00

Karthik

2,391
6
34
65

2

It does not work for me too. I have the AutoGenerateColumns to false if that matters. – Marcel Feb 28 '13 at 12:35

score -1 · Answer 6 · answered Nov 10 '16 at 10:31

hey recently i figured it out how to set width if your gridview databound with sql dataset.first set these control RowStyle-Wrap="false" HeaderStyle-Wrap="false" and then you can set the column width as much as you like. ex : ItemStyle-Width="150px" HeaderStyle-Width="150px"

ASP.NET Setting width of DataBound column in GridView

6 Answers6

Linked