ASP.NET Set GridView Column max width size

Question

I am using ASP.NET C# on VS2005.

I have a GridView table with a column named Description, and since the input is always very long, the description is very long horizontally.

I would want the GridView to have a max width size for all columns.

I have tried many ways but none of them worked.

ItemStyle-Width="50px",

HeaderStyle-BorderWidth="50px",

HeaderStyle-Width="50px",

RowStyle-Width="50px",

Width="50px"

Below is a code snippet of my GridView:

<asp:GridView ID="GridView1" AutoGenerateEditButton="True" ondatabound="gv_DataBound" runat="server" DataSourceID="SqlDataSource1">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="UserSelector" OnCheckedChanged="UserSelector_CheckedChanged" ondatabound="gv_DataBound" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Anyone know how to adjust the size of GridView columns based on my situation?

This worked for me: http://stackoverflow.com/a/17457296/2415524 — mbomb007, Aug 05 '16 at 16:32

Monzir · Answer 1 · 2013-04-10T11:31:54.467

8

This is how I control the column width.

1.Add the CSS in the header.

<style type="text/css">
    .maxWidthGrid
    {
        max-width: 300px;
        overflow: hidden;
    }
</style>

2.Then use the CSS in necessary columns like this ItemStyle-CssClass="maxWidthGrid"

<asp:BoundField ItemStyle-CssClass="maxWidthGrid" DataField="ClientName" HeaderText="Client Name"
                    ReadOnly="True" SortExpression="ClientName" />

edited Apr 10 '13 at 11:31

answered Apr 10 '13 at 10:50

Monzir

621
4
9
29

For whatever reason, I had to use '.maxWidthGrid td' to get this to stick, but this worked for me. – gaijintendo Mar 26 '14 at 15:28

Thomas Andreè Wang · Accepted Answer · 2011-11-29T10:02:13.783

4

I changed my code is this what you where thinking bout?

        <RowStyle Width="150px"/>

Remove all the stash

<asp:TemplateField><ItemTemplate> </ItemTemplate></asp:TemplateField>

and just use simple

<columns> </columns>

Here i how i think you code will look like AutoGenerateColumns="True" or false dont seeme to matter

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" DataSourceID="SqlDataSource1">
         <Columns>
            <asp:CheckBox ID="UserSelector" OnCheckedChanged="UserSelector_CheckedChanged" ondatabound="gv_DataBound" runat="server" />
        </Columns>
        <RowStyle Width="150px"/>
    </asp:GridView>

edited Nov 29 '11 at 10:02

answered Nov 25 '11 at 07:42

Thomas Andreè Wang

3,379
6
37
53

@Thomos hi, your method can be applied to columns that are called out in the asp tab right? how do I implement the div to columns which are not in the asp tab, but will automatically show when the webpage is loaded, because I have set `AutoGenerateColumns` to true. If I set it to false, how do I create those columns in the asp tab? – gymcode Nov 25 '11 at 08:09

score 1 · Answer 3 · answered Nov 25 '11 at 08:23

you can handle the RowDataBound event.

protected int widestData;
protected void GridView1_RowDataBound(object sender, 
    GridViewRowEventArgs e)
{
    System.Data.DataRowView drv;
    drv = (System.Data.DataRowView)e.Row.DataItem;
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
      if (drv != null)
      {
        String catName = drv[1].ToString();
        Response.Write(catName + "/");

        int catNameLen = catName.Length;
        if (catNameLen > widestData)
        {
          widestData = catNameLen;
          GridView1.Columns[2].ItemStyle.Width =
            widestData * 30;
          GridView1.Columns[2].ItemStyle.Wrap = false;
        }

      }
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    widestData = 0;
}

Check this How to: Set GridView Web Server Control Column Width Dynamically for more detailed information.

if your gridview autogeneratecolumns property is set to false and you are creating custom columns then you can use templatefileds where you can implement Table and Div to control the width of the columns.

ASP.NET Set GridView Column max width size

3 Answers3

Linked