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

  • [アーティクル]

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

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

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

必須コンポーネント

このチュートリアルを完了するための要件は次のとおりです。

  • Northwind SQL Server サンプル データベースがあるサーバーへのアクセス。

フォームの作成

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

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

  2. データベースへの接続の詳細を処理できるようにするために、フォームのクラス定義にメソッドを実装します。 この例では 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

  3. フォームの 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 コントロールが上下に並んで表示されます。 上は Northwind Customers テーブルの顧客であり、下は選択した顧客に対応する Orders です。 上の DataGridView で別の行を選択すると、それに応じて下の DataGridView の内容が変化します。

次の手順

このアプリケーションは、DataGridView コントロールの機能の基礎について理解してもらうためのものです。 DataGridView コントロールの外観と動作は、次に示すいくつかの方法でカスタマイズできます。

関連項目