Comment : définir dynamiquement la largeur de colonne d'un contrôle serveur Web GridView

Mise à jour : novembre 2007

Par défaut, la taille des colonnes dans le contrôle GridView est adaptée automatiquement. Les colonnes restituent sous forme de tableau HTML des cellules (éléments td) sans informations sur la largeur ; la plupart des navigateurs adaptent la taille des cellules du tableau en tenant compte du contenu le plus large de la colonne.

Si nécessaire, vous pouvez définir par programme la largeur des colonnes dans le contrôle GridView. Cela est utile si la largeur de la colonne dépend des informations qui sont uniquement disponibles au moment de l'exécution. Par exemple, vous pouvez adapter la taille d'une colonne en fonction de son contenu, c'est-à-dire en fonction des données auxquelles le contrôle GridView est lié.

La technique de base utilisée pour définir la largeur de colonne implique la définition de la propriété Width d'un modèle de colonne. Si vous souhaitez que la largeur soit définie en fonction de son contenu, vous pouvez gérer l'événement RowDataBound. Cela rend les données d'une ligne disponibles pour examen.

Pour définir la largeur de colonne dynamiquement

• Dans le code, affectez la largeur souhaitée à la propriété Width de la propriété ItemStyle d'une colonne du contrôle GridView.

  L'exemple de code suivant indique comment affecter la valeur entrée par un utilisateur dans une zone de texte à la largeur de toutes les colonnes dans le contrôle GridView1.

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

Pour définir la largeur de colonne en fonction des données contenues

1. Créez un gestionnaire pour l'événement RowDataBound.

   L'événement RowDataBound est déclenché chaque fois qu'une nouvelle ligne est liée aux données dans la grille et vous donne accès aux données de chaque ligne.

2. Dans le gestionnaire d'événements, procédez comme suit :

   1. Créez un objet DataRowView et assignez-lui la valeur DataItem de la ligne de grille actuelle.

      La propriété DataItem est tapée comme un objet. Par conséquent, vous devez effectuer un cast de celle-ci.

   2. Testez une ligne de données (DataControlRowType) afin de vous assurer que vous utilisez une ligne liée aux données et pas un en-tête ou un pied de page.

   3. À partir de l'objet DataRowView, extrayez la valeur des données que vous souhaitez examiner.

   4. Définissez la propriété Width de la propriété ItemStyle.

   5. Affectez à la propriété Wrap de la propriété ItemStyle la valeur false.

      Si la propriété Wrap a la valeur false, la colonne est automatiquement redimensionnée.

   L'exemple de code suivant montre comment définir la largeur d'une colonne (dans ce cas, la troisième colonne) en fonction de la largeur de l'élément de données le plus large de la deuxième colonne. Le gestionnaire d'événements RowDataBound est appelé une fois pour chaque ligne de données qui est affichée par le contrôle GridView. Le code stocke le nombre de caractères de l'élément le plus large dans un membre de page protégé. Le code définit la largeur de la colonne en fonction du nombre de caractères fois 30 (un multiplicateur arbitraire).

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

Voir aussi

Référence

Vue d'ensemble du contrôle serveur Web GridView