DataGridView：ボタン列の表示（サンプルあり）

📋 目次（クリックで展開）

DataGridView では、列にボタンを表示することができます。行の詳細情報をダイアログ表示する際や、行に対する任意の操作（行編集の開始・行の削除など）に利用されます。

ボタン列の初期化（ボタン列の表示）

ボタン列の表示には、DataGridViewButtonColumn クラスのインスタンスを用意し、DataGridView.Columns コレクションに追加します。

buttonColumn.Text = “詳細表示”; により、すべてのボタンに一律で同じテキスト表示を行っています。

Form1.cs
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();


        this.InitializeDataGridView();
    }


    // DataGridView にボタン列を追加する
    private void InitializeDataGridView()
    {
        this.dataGridView1.AllowUserToAddRows = false;


        // DataGridViewButtonColumn を作成
        var buttonColumn = new DataGridViewButtonColumn();
        buttonColumn.Name = "Action";
        buttonColumn.HeaderText = "Action";
        // 全てのボタンに同じテキストを表示
        buttonColumn.Text = "詳細表示";
        // この列の「Text」プロパティの値をすべてのボタンの表示テキストとして使用する
        buttonColumn.UseColumnTextForButtonValue = true;


        // DataGridView に列を追加
        dataGridView1.Columns.Add(buttonColumn);
    }
    ...
}

下記のように、Action 列にボタンが表示されることが分かります。

ボタンクリックのハンドル

続いて、ボタン列に配置されているボタンのクリックのハンドル方法を示します。DataGridView の CellClick イベントを登録し、イベントハンドラー内で、ボタン列でのクリック操作かを判定します。

下記の実装例では、ボタンクリック時に、MessageBox に、1 列目と 2 列目の値を組み合わせた文字列を表示します。

// DataGridView にボタン列を追加する
private void InitializeDataGridView()
{
    this.dataGridView1.AllowUserToAddRows = false;


    // DataGridViewButtonColumn を作成
    var buttonColumn = new DataGridViewButtonColumn();
    buttonColumn.Name = "Action";
    buttonColumn.HeaderText = "Action";
    // 全てのボタンに同じテキストを表示
    buttonColumn.Text = "詳細表示";


    // DataGridView に列を追加
    dataGridView1.Columns.Add(buttonColumn);


    // クリックイベントハンドラを追加
    dataGridView1.CellClick += dataGridView1_CellClick;
}


// ボタンがクリックされたときのイベント
private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e)
{
    // ボタン列かどうかの判定
    if (e.ColumnIndex == dataGridView1.Columns["Action"].Index && e.RowIndex >= 0)
    {
        /* 任意の処理を実装 */
        // クリックされた行を取得
        var row = dataGridView1.Rows[e.RowIndex];
        // クリックされた行の値を表示
        MessageBox.Show($"行：{row.Cells[1].Value}（{row.Cells[2].Value}） がクリックされました。");
    }
}

行ごとにボタンテキストの変更

先の実装では、全行のボタンで同じテキストを表示していました。行ごとにボタンのテキストを変更する場合、DataGridView.CellFormatting イベント内で、テキストを変更します。

private void DataGridView1_CellFormatting(object? sender, DataGridViewCellFormattingEventArgs e)
{
    if (dataGridView1.Columns[e.ColumnIndex].Name == "Action" && e.RowIndex >= 0)
    {
        // ここで行ごとのテキストを設定（例：行番号を組み合わせたテキスト）
        e.Value = $"詳細：{e.RowIndex + 1}";
    }
}

サンプルアプリケーション

DataGridView_ButtonColumn_CS.zip
※ サンプルアプリケーションは、.NET 8 で作成されています。

実行結果

クリックされたボタンの、ID セルの値が MessageBox 内に組み込まれて表示されていることが分かります。

💬 コメント