方法 : GridView Web サーバー コントロールの列幅を動的に設定する

更新 : 2007 年 11 月

既定では、GridView コントロールの列は自動的にサイズが調整されます。列は、幅情報を持たない HTML テーブル セル (td 要素) として表示されます。大部分のブラウザは、列内で最も幅の広い内容を表示できるようにテーブル セルのサイズを調整します。

必要に応じて、GridView コントロールの個々の列の幅をプログラムで設定できます。これは、実行時にのみ使用する情報に応じて列の幅を決定する場合に役立ちます。たとえば、列の内容に従ってそのサイズを調整する場合があります。つまり、GridView コントロールがバインドするデータに基づいて調整します。

列幅を設定する基本的な技法では、列テンプレートの Width プロパティを使用して設定します。内容によってその幅を設定する場合は、RowDataBound イベントを処理します。これにより、行のデータを調査できるようになります。

動的に列幅を設定するには

• コードで、GridView コントロール列の ItemStyle プロパティの Width プロパティを目的の幅に設定します。

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

データの内容に基づいて列幅を設定するには

1. RowDataBound イベントのハンドラを作成します。

   グリッド内の新しい行をデータ バインドするたびに RowDataBound イベントが発生し、各行のデータにアクセスできます。

2. イベント ハンドラで、次の処理を行います。

   1. DataRowView オブジェクトを作成し、現在のグリッド行の DataItem 値をそれに割り当てます。

      DataItem プロパティがオブジェクトとして型指定されます。このため、それをキャストする必要があります。

   2. データ行 (DataControlRowType) をテストして、ヘッダーおよびフッターではなく、データ バインド行を操作していることを確認します。

   3. DataRowView オブジェクトから、調べるデータ値を抽出します。

   4. ItemStyle プロパティの Width プロパティを設定します。

   5. ItemStyle プロパティの Wrap プロパティを false に設定します。

      Wrap プロパティが false の場合、列のサイズが自動的に再調整されます。

   2 番目の列で最も幅の広い要素の幅に基づいて、列 (この場合は、3 番目の列) の幅を設定するコード例を次に示します。GridView コントロールで表示されるデータ行ごとに 1 回ずつ、RowDataBound イベント ハンドラが呼び出されます。コードが、保護されたページ メンバで最も幅の広い要素の文字数を格納します。コードが、列の幅をこの文字数の 30 倍 (任意の乗数) に設定します。

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

参照

参照

GridView Web サーバー コントロールの概要