チュートリアル: 2 つの Windows フォーム DataGridView コントロールを使用したマスター/詳細フォームの作成

DataGridView コントロールを使用する最も一般的なシナリオの 1 つは、2 つのデータベーステーブル間の親子リレーションシップが表示される マスター/詳細 フォームです。マスターテーブルで行を選択すると、詳細テーブルが対応する子データで更新されます。

マスター/詳細フォームの実装は、DataGridView コントロールと BindingSource コンポーネントの間の相互作用を使用して簡単に行うことができます。このチュートリアルでは、2 つの DataGridView コントロールと 2 つの BindingSource コンポーネントを使用してフォームをビルドします。このフォームには、Northwind SQL Server サンプルデータベースの 2 つの関連テーブル (Customers と Orders) が表示されます。完了すると、マスター DataGridView のデータベース内のすべての顧客と、選択した顧客のすべての注文を詳細 DataGridViewに表示するフォームが作成されます。

このトピックのコードを 1 つの一覧としてコピーするには、「方法: 2 つの Windows フォーム DataGridView コントロールを使用してマスター/詳細フォームを作成する」を参照してください。

[前提条件]

このチュートリアルを完了するには、次のものが必要です。

Northwind SQL Server サンプルデータベースを持つサーバーへのアクセス。

フォームの作成

マスターと詳細フォームを作成するには

Form から派生し、2 つの DataGridView コントロールと 2 つの BindingSource コンポーネントを含むクラスを作成します。次のコードは、基本的なフォームの初期化を提供し、Main メソッドを含みます。 Visual Studio デザイナーを使用してフォームを作成する場合は、このコードの代わりにデザイナーで生成されたコードを使用できますが、ここでの変数宣言に示されている名前を必ず使用してください。

using System;
using System.Data;
using System.Data.SqlClient;
using System.Windows.Forms;

public class Form1 : System.Windows.Forms.Form
{
    private DataGridView masterDataGridView = new DataGridView();
    private BindingSource masterBindingSource = new BindingSource();
    private DataGridView detailsDataGridView = new DataGridView();
    private BindingSource detailsBindingSource = new BindingSource();

    [STAThreadAttribute()]
    public static void Main()
    {
        Application.Run(new Form1());
    }

    // Initializes the form.
    public Form1()
    {
        masterDataGridView.Dock = DockStyle.Fill;
        detailsDataGridView.Dock = DockStyle.Fill;

        SplitContainer splitContainer1 = new SplitContainer();
        splitContainer1.Dock = DockStyle.Fill;
        splitContainer1.Orientation = Orientation.Horizontal;
        splitContainer1.Panel1.Controls.Add(masterDataGridView);
        splitContainer1.Panel2.Controls.Add(detailsDataGridView);

        this.Controls.Add(splitContainer1);
        this.Load += new System.EventHandler(Form1_Load);
        this.Text = "DataGridView master/detail demo";
    }

Imports System.Data
Imports System.Data.SqlClient
Imports System.Windows.Forms

Public Class Form1
    Inherits System.Windows.Forms.Form

    Private masterDataGridView As New DataGridView()
    Private masterBindingSource As New BindingSource()
    Private detailsDataGridView As New DataGridView()
    Private detailsBindingSource As New BindingSource()

    <STAThreadAttribute()> _
    Public Shared Sub Main()
        Application.Run(New Form1())
    End Sub

    ' Initializes the form.
    Public Sub New()

        masterDataGridView.Dock = DockStyle.Fill
        detailsDataGridView.Dock = DockStyle.Fill

        Dim splitContainer1 As New SplitContainer()
        splitContainer1.Dock = DockStyle.Fill
        splitContainer1.Orientation = Orientation.Horizontal
        splitContainer1.Panel1.Controls.Add(masterDataGridView)
        splitContainer1.Panel2.Controls.Add(detailsDataGridView)

        Me.Controls.Add(splitContainer1)
        Me.Text = "DataGridView master/detail demo"

    End Sub

End Class

データベースへの接続の詳細を処理するためのメソッドをフォームのクラス定義に実装します。この例では、GetData オブジェクトを設定し、DataSet オブジェクトをデータセットに追加し、DataRelation コンポーネントをバインドする BindingSource メソッドを使用します。 connectionString 変数は、データベースに適した値に設定してください。

重要

接続文字列内にパスワードなどの機密情報を格納すると、アプリケーションのセキュリティに影響する可能性があります。 Windows 認証 (統合セキュリティとも呼ばれます) を使用すると、データベースへのアクセスをより安全に制御できます。詳細については、「接続情報の保護」を参照してください。

private void GetData()
{
    try
    {
        // Specify a connection string. Replace the given value with a
        // valid connection string for a Northwind SQL Server sample
        // database accessible to your system.
        String connectionString =
            "Integrated Security=SSPI;Persist Security Info=False;" +
            "Initial Catalog=Northwind;Data Source=localhost";
        SqlConnection connection = new SqlConnection(connectionString);

        // Create a DataSet.
        DataSet data = new DataSet();
        data.Locale = System.Globalization.CultureInfo.InvariantCulture;

        // Add data from the Customers table to the DataSet.
        SqlDataAdapter masterDataAdapter = new
            SqlDataAdapter("select * from Customers", connection);
        masterDataAdapter.Fill(data, "Customers");

        // Add data from the Orders table to the DataSet.
        SqlDataAdapter detailsDataAdapter = new
            SqlDataAdapter("select * from Orders", connection);
        detailsDataAdapter.Fill(data, "Orders");

        // Establish a relationship between the two tables.
        DataRelation relation = new DataRelation("CustomersOrders",
            data.Tables["Customers"].Columns["CustomerID"],
            data.Tables["Orders"].Columns["CustomerID"]);
        data.Relations.Add(relation);

        // Bind the master data connector to the Customers table.
        masterBindingSource.DataSource = data;
        masterBindingSource.DataMember = "Customers";

        // Bind the details data connector to the master data connector,
        // using the DataRelation name to filter the information in the
        // details table based on the current row in the master table.
        detailsBindingSource.DataSource = masterBindingSource;
        detailsBindingSource.DataMember = "CustomersOrders";
    }
    catch (SqlException)
    {
        MessageBox.Show("To run this example, replace the value of the " +
            "connectionString variable with a connection string that is " +
            "valid for your system.");
    }
}

Private Sub GetData()

    Try
        ' Specify a connection string. Replace the given value with a 
        ' valid connection string for a Northwind SQL Server sample
        ' database accessible to your system.
        Dim connectionString As String = _
            "Integrated Security=SSPI;Persist Security Info=False;" & _
            "Initial Catalog=Northwind;Data Source=localhost"
        Dim connection As New SqlConnection(connectionString)

        ' Create a DataSet.
        Dim data As New DataSet()
        data.Locale = System.Globalization.CultureInfo.InvariantCulture

        ' Add data from the Customers table to the DataSet.
        Dim masterDataAdapter As _
            New SqlDataAdapter("select * from Customers", connection)
        masterDataAdapter.Fill(data, "Customers")

        ' Add data from the Orders table to the DataSet.
        Dim detailsDataAdapter As _
            New SqlDataAdapter("select * from Orders", connection)
        detailsDataAdapter.Fill(data, "Orders")

        ' Establish a relationship between the two tables.
        Dim relation As New DataRelation("CustomersOrders", _
            data.Tables("Customers").Columns("CustomerID"), _
            data.Tables("Orders").Columns("CustomerID"))
        data.Relations.Add(relation)

        ' Bind the master data connector to the Customers table.
        masterBindingSource.DataSource = data
        masterBindingSource.DataMember = "Customers"

        ' Bind the details data connector to the master data connector,
        ' using the DataRelation name to filter the information in the 
        ' details table based on the current row in the master table. 
        detailsBindingSource.DataSource = masterBindingSource
        detailsBindingSource.DataMember = "CustomersOrders"
    Catch ex As SqlException
        MessageBox.Show("To run this example, replace the value of the " & _
            "connectionString variable with a connection string that is " & _
            "valid for your system.")
    End Try

End Sub

Load コントロールを DataGridView コンポーネントにバインドし、BindingSource メソッドを呼び出す、フォームの GetData イベントのハンドラーを実装します。次の例には、表示されるデータに合わせて列 DataGridView サイズを変更するコードが含まれています。

private void Form1_Load(object sender, System.EventArgs e)
{
    // Bind the DataGridView controls to the BindingSource
    // components and load the data from the database.
    masterDataGridView.DataSource = masterBindingSource;
    detailsDataGridView.DataSource = detailsBindingSource;
    GetData();

    // Resize the master DataGridView columns to fit the newly loaded data.
    masterDataGridView.AutoResizeColumns();

    // Configure the details DataGridView so that its columns automatically
    // adjust their widths when the data changes.
    detailsDataGridView.AutoSizeColumnsMode =
        DataGridViewAutoSizeColumnsMode.AllCells;
}

Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles Me.Load

    ' Bind the DataGridView controls to the BindingSource
    ' components and load the data from the database.
    masterDataGridView.DataSource = masterBindingSource
    detailsDataGridView.DataSource = detailsBindingSource
    GetData()

    ' Resize the master DataGridView columns to fit the newly loaded data.
    masterDataGridView.AutoResizeColumns()

    ' Configure the details DataGridView so that its columns automatically
    ' adjust their widths when the data changes.
    detailsDataGridView.AutoSizeColumnsMode = _
        DataGridViewAutoSizeColumnsMode.AllCells

End Sub

アプリケーションのテスト

これで、フォームをテストして、期待どおりに動作することを確認できます。

フォームをテストするには

アプリケーションをコンパイルして実行する。

2 つの DataGridView コントロールが 1 つ上に表示されます。上には Northwind Customers テーブルの顧客が、下部には選択した顧客に対応する Orders があります。上の DataGridViewで異なる行を選択すると、下位の DataGridView の内容がそれに応じて変化します。

次のステップ

このアプリケーションは、DataGridView コントロールの機能の基本的な理解を提供します。 DataGridView コントロールの外観と動作は、いくつかの方法でカスタマイズできます。

枠線とヘッダーのスタイルを変更します。詳細については、「方法: Windows フォーム DataGridView コントロールの罫線と枠線のスタイルを変更するを参照してください。
DataGridView コントロールへのユーザー入力を有効または制限します。詳細については、「方法: Windows フォーム DataGridView コントロールので行の追加と削除を防止する」および「方法: Windows フォーム DataGridView コントロールで列を Read-Only する方法」を参照してください。
DataGridView コントロールへのユーザー入力を検証します。詳細については、「チュートリアル: Windows フォーム DataGridView コントロールでのデータの検証」を参照してください。
仮想モードを使用して非常に大きなデータセットを処理します。詳細については、「チュートリアル: Windows フォーム DataGridView コントロールでの仮想モードの実装」を参照してください。
セルの外観をカスタマイズします。詳細については、「方法: Windows フォーム DataGridView コントロールのセルの外観をカスタマイズする」および「方法: Windows フォーム DataGridView コントロールの既定のセルスタイルを設定する」を参照してください。

こちらも参照ください

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-05-07