チュートリアル: 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 サンプル データベースがあるサーバーへのアクセス。
フォームの作成
マスターと詳細フォームを作成するには
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 コントロールが上下に並んで表示されます。 上は Northwind
Customers
テーブルの顧客であり、下は選択した顧客に対応するOrders
です。 上の DataGridView で別の行を選択すると、それに応じて下の DataGridView の内容が変化します。
次の手順
このアプリケーションは、DataGridView コントロールの機能の基礎について理解してもらうためのものです。 DataGridView コントロールの外観と動作は、次に示すいくつかの方法でカスタマイズできます。
境界線とヘッダーのスタイルを変更する。 詳細については、「方法: Windows フォーム DataGridView コントロールの境界線とグリッド線のスタイルを変更する」を参照してください。
DataGridView コントロールへのユーザー入力を有効化または制限する。 詳細については、「方法: Windows フォーム DataGridView コントロールで行が追加および削除されないようにする」および「方法: Windows フォームの DataGridView コントロールで列を読み取り専用にする」を参照してください。
DataGridView コントロールへのユーザー入力を検証します。 詳細については、「チュートリアル: Windows フォーム DataGridView コントロールのデータの妥当性検査」を参照してください。
仮想モードを使用して、非常に大きなデータ セットを処理する。 詳細については、「チュートリアル: Windows フォーム DataGridView コントロールでの仮想モードの実装」を参照してください。
セルの外観をカスタマイズする。 詳細については、「方法: Windows フォームの DataGridView コントロールのセルの外観をカスタマイズする」および「方法: Windows フォーム DataGridView コントロールの既定のセル スタイルを設定する」を参照してください。
関連項目
.NET Desktop feedback