Cómo: Establecer dinámicamente el ancho de las columnas en el control de servidor Web GridView

Actualización: noviembre 2007

De forma predeterminada, el tamaño de las columnas en el control GridView se ajusta automáticamente. Las columnas se representan como celdas de tablas HTML (elementos td) sin información sobre el ancho; la mayoría de los exploradores ajustan el tamaño de las celdas de la tabla para permitir el contenido más ancho de la columna.

Si es necesario, puede establecer el ancho de columnas individuales en el control GridView mediante programación. Esto resulta útil si el ancho de columna depende de la información disponible en tiempo de ejecución. Por ejemplo, puede ajustar el tamaño de una columna según su contenido, es decir, basándose en los datos con que enlaza el control GridView.

La técnica básica para establecer el ancho de columna conlleva la configuración de la propiedad Width de una plantilla de columna. Si desea que el ancho se establezca según su contenido, puede controlar el evento RowDataBound. Esto hace que los datos de una fila estén disponibles para que se puedan examinar.

Para establecer el ancho de columna de forma dinámica

• En código, establezca la propiedad Width de la propiedad ItemStyle para una columna de control GridView en el ancho que desee.

  El siguiente ejemplo de código muestra cómo establecer el ancho de todas las columnas en el control GridView1 con el valor que un usuario escriba en un cuadro de texto.

  Protected Sub Button1_Click(ByVal sender As Object, _
          ByVal e As System.EventArgs)
      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
        ' Report error.
      End Try
  End Sub
  

  protected void Button1_Click(object sender, EventArgs e)
  {
      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
      {
        // Report error.      
      }
  }
  

Para establecer el ancho de columna basándose en el contenido de los datos

1. Cree un controlador para el evento RowDataBound.

   El evento RowDataBound se provoca cada vez que una nueva fila se enlaza a los datos de la cuadrícula y proporciona acceso a los datos para cada fila.

2. En el control de eventos, haga lo siguiente:

   1. Cree un objeto DataRowView y asígnele el valor DataItem de la fila actual de la cuadrícula.

      La propiedad DataItem es de tipo objeto. Por lo tanto, debe convertirla.

   2. Pruebe una fila de datos (DataControlRowType) para asegurarse de que está trabajando con una fila enlazada a datos y no a un encabezado o pie de página.

   3. Desde el objeto DataRowView, extraiga el valor de datos que desee examinar.

   4. Establezca la propiedad Width para la propiedad ItemStyle.

   5. Establezca la propiedad Wrap de la propiedad ItemStyle en false.

      Si la propiedad Wrap es false, el tamaño de la columna se ajusta automáticamente.

   El siguiente ejemplo de código muestra cómo establecer el ancho de una columna (en este caso, la tercera columna) según el ancho del elemento de datos más ancho de la segunda columna. El controlador de eventos RowDataBound se llama una vez por cada fila de datos que muestra el control GridView. El código almacena el recuento de caracteres del elemento más ancho en un miembro de página protegida. El código establece el ancho de la columna multiplicando el recuento de caracteres por 30 (un multiplicador arbitrario).

   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;
   }
   

Vea también

Otros recursos

GridView (Control de servidor Web)