How to: Set GridView Web Server Control Column Width Dynamically

By default, columns in the GridView control are sized automatically. Columns render as HTML table cells (td elements) without width information; most browsers size table cells to allow for the widest content in the column.

If it is required, you can set the width of individual columns in the GridView control programmatically. This is useful, if the width of the column depends on information that is available only at run time. For example, you might size a column according to its contents—that is, based on the data that the GridView control binds to.

The basic technique for setting column width involves setting the Width property of a column template. If you want the width to be set according to its contents, you can handle the RowDataBound event. This makes the data for a row available to you for examination.

To set column width dynamically

  • In code, set the Width property of the ItemStyle property for a GridView control column to the width that you want.

    The following code example shows how to set the width of all the columns in the GridView1 control to the value that a user enters in a text box. Error messages are displayed in a Label control.

    Protected Sub TextBox1_TextChanged (ByVal sender As Object, _
            ByVal e As System.EventArgs)        Label1.Text = ""
        Try
          Dim colWidth As Integer
          colWidth = CInt(Server.HtmlEncode(TextBox1.Text))
          If colWidth > 0 Then
            For i As Integer = 0 To GridView1.Columns.Count - 1
              GridView1.Columns(i).ItemStyle.Width = colWidth
            Next
          End If
        Catch
          Label1.Text = "An error occurred."
        End Try
    End Sub
    
    protected void TextBox1_TextChanged (object sender, EventArgs e)
    {    Label1.Text = "";
        try
        {
          int colWidth = Int16.Parse(Server.HtmlEncode(TextBox1.Text));
          if (colWidth > 0)
          {
            for (int i = 0; i < GridView1.Columns.Count; i++)
            {
              GridView1.Columns[i].ItemStyle.Width = colWidth;
            }
          }
        }
        catch
        {
          Label1.Text = "An error occurred."
        }
    }
    

To set column width based on data contents

  1. Create a handler for the RowDataBound event.

    The RowDataBound event is raised each time that a new row is data-bound in the grid and gives you access to the data for each row.

  2. In the event handler, do the following:

    1. Create a DataRowView object and assign to it the DataItem value for the current grid row.

      The DataItem property is typed as an object. Therefore, you must cast it.

    2. Test for a data row (DataControlRowType) to make sure that you are working with a data-bound row and not a header or footer.

    3. From the DataRowView object, extract the data value that you want to examine.

    4. Set the Width property for the ItemStyle property.

    5. Set the Wrap property of the ItemStyle property to false.

      If the Wrap property is false, the column is automatically resized.

    The following code example shows how to set the width of a column (in this case, the third column) based on the width of the widest data element of the second column. The RowDataBound event handler is called one time for each data row that is displayed by the GridView control. The code stores the character count of the widest element in a protected page member. The code sets the width of the column to the character count times 30 (an arbitrary multiplier).

    Protected widestData As Integer
    Protected Sub GridView1_RowDataBound(ByVal sender As Object, _
            ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
        Dim drv As System.Data.DataRowView
        drv = CType(e.Row.DataItem, System.Data.DataRowView)
        If e.Row.RowType = DataControlRowType.DataRow Then
          If drv IsNot Nothing Then
            Dim catName As String = drv(1).ToString()
            Dim catNameLen As Integer = catName.Length
            If catNameLen > widestData Then
              widestData = catNameLen
              GridView1.Columns(2).ItemStyle.Width = _
                  widestData * 30
              GridView1.Columns(2).ItemStyle.Wrap = False
            End If
          End If
        End If
    End Sub
    
    Protected Sub Page_Load(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles Me.Load
        widestData = 0
    End Sub
    
    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;
    }
    

See Also

Reference

GridView Web Server Control Overview