Condividi tramite

Procedura: impostare la larghezza di colonna del controllo server Web GridView dinamicamente

  • Articolo

Aggiornamento: novembre 2007

Per impostazione predefinita, le dimensioni delle colonne nel controllo GridView vengono definite automaticamente. Le colonne vengono visualizzate come celle di una tabella HTML (elementi td) senza informazioni sulla larghezza. Nella maggior parte dei browser le dimensioni delle celle di una tabella vengono impostate in modo da contenere i dati di lunghezza massima per ogni colonna.

Se necessario, è possibile impostare la larghezza delle singole colonne nel controllo GridView a livello di codice. Questa tecnica è utile se la larghezza della colonna dipende da informazioni disponibili solo in fase di esecuzione. Ad esempio, è possibile adattare la dimensione di una colonna al suo contenuto, ossia in base ai dati a cui è associato il controllo GridView.

La tecnica di base per l'impostazione della larghezza delle colonne prevede l'impostazione della proprietà Width di un modello di colonna. Se si desidera impostare la larghezza in base al contenuto, è possibile gestire l'evento RowDataBound, che consente di esaminare i dati di una riga.

Per impostare la larghezza di una colonna dinamicamente

  • Impostare nel codice la proprietà Width della proprietà ItemStyle per una colonna del controllo GridView sulla larghezza desiderata.

    Nell'esempio di codice riportato di seguito viene illustrato come impostare la larghezza di tutte le colonne del controllo GridView1 sul valore immesso da un utente in una casella di testo.

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

Per impostare la larghezza di una colonna in base al contenuto dei dati

  1. Creare un gestore per l'evento RowDataBound.

    L'evento RowDataBound viene generato ogni volta che una nuova riga viene associata a dati nella griglia e fornisce l'accesso ai dati per ciascuna riga.

  2. Nel gestore eventi eseguire le seguenti operazioni:

    1. Creare un oggetto DataRowView e assegnarlo al valore DataItem per la riga corrente della griglia.

      Poiché la proprietà DataItem è tipizzata come oggetto, è necessario eseguirne il cast.

    2. Eseguire un test con una riga di dati (DataControlRowType) per accertarsi di utilizzare una riga associata a dati e non un'intestazione o un piè di pagina.

    3. Estrarre dall'oggetto DataRowView il valore dei dati che si desidera esaminare.

    4. Impostare la proprietà Width per la proprietà ItemStyle.

    5. Impostare la proprietà Wrap della proprietà ItemStyle su false.

      Se la proprietà Wrap è false, la colonna viene ridimensionata automaticamente.

    Nell'esempio di codice riportato di seguito viene illustrato come impostare la larghezza di una colonna, in questo caso la terza, in base alla larghezza dell'elemento dati più lungo della seconda colonna. Il gestore dell'evento RowDataBound viene chiamato una volta per ogni riga di dati visualizzata dal controllo GridView. Nel codice viene memorizzato il numero di caratteri dell'elemento più lungo in un membro protetto della pagina. Nel codice la larghezza della colonna viene quindi impostata sul numero di caratteri moltiplicato per 30 (moltiplicatore 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;
}

Vedere anche

Riferimenti

Cenni preliminari sul controllo server Web GridView