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

[アーティクル]
08/09/2011

DataGridView コントロールの使用用途で特によくあるのが、マスター/詳細形式のフォームです。これは、2 つのデータベーステーブル間の親子のリレーションシップを表示するフォームです。マスターテーブルの行を選択すると、それに対応する子データによって詳細テーブルが更新されます。

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

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

必須コンポーネント

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

Northwind SQL Server サンプルデータベースがインストールされたサーバーへのアクセス

フォームの作成

マスター/詳細形式のフォームを作成するには

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

Imports System
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

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


...


}

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

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

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

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

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.");
    }
}

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

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

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

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

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

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

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

2 つの DataGridView コントロールが上下に並んで表示されます。 Northwind の Customers テーブルの顧客が上に表示され、選択した顧客に対応する Orders が下に表示されます。上の DataGridView で別の行を選択すると、それに応じて下の DataGridView の内容が変更されます。

次の手順

このアプリケーションでは、DataGridView コントロールの機能について基本を理解できます。次のような方法を使用すると、DataGridView コントロールの外観および動作をカスタマイズできます。

輪郭およびヘッダースタイルを変更します。詳細については、「方法 : Windows フォーム DataGridView コントロールの境界線とグリッド線のスタイルを変更する」を参照してください。
DataGridView コントロールへのユーザー入力を有効にするかまたは制限します。詳細については、「方法 : Windows フォーム DataGridView コントロールで行が追加および削除されないようにする」および「方法 : Windows フォームの DataGridView コントロールで列を読み取り専用にする」を参照してください。
DataGridView コントロールへのユーザー入力を検証します。詳細については、「チュートリアル : Windows フォーム DataGridView コントロールのデータの妥当性検査」を参照してください。
仮想モードを使用して非常に大きなデータセットを処理します。詳細については、「チュートリアル : Windows フォーム DataGridView コントロールでの仮想モードの実装」を参照してください。
セルの外観をカスタマイズします。詳細については、「方法 : Windows フォームの DataGridView コントロールのセルの外観をカスタマイズする」および「方法 : Windows フォーム DataGridView コントロールの既定のセルスタイルを設定する」を参照してください。

参照

次の方法で共有