Panduan: Membuat Formulir Master/Detail Menggunakan Dua Formulir Windows Kontrol DataGridView

Artikel
10/18/2023

Salah satu skenario paling umum untuk menggunakan DataGridView kontrol adalah formulir master/detail , di mana hubungan induk/anak antara dua tabel database ditampilkan. Memilih baris dalam tabel master menyebabkan tabel detail diperbarui dengan data anak terkait.

Menerapkan formulir master/detail mudah menggunakan interaksi antara DataGridView kontrol dan BindingSource komponen. Dalam panduan ini, Anda akan membangun formulir menggunakan dua DataGridView kontrol dan dua BindingSource komponen. Formulir akan menampilkan dua tabel terkait dalam database sampel Northwind SQL Server: Customers dan Orders. Setelah selesai, Anda akan memiliki formulir yang menunjukkan semua pelanggan dalam database di master DataGridView dan semua pesanan untuk pelanggan yang dipilih secara rinci DataGridView.

Untuk menyalin kode dalam topik ini sebagai daftar tunggal, lihat Cara: Membuat Formulir Master/Detail Menggunakan Kontrol DataGridView Dua Formulir Windows.

Prasyarat

Untuk menyelesaikan panduan ini, Anda akan memerlukan:

Akses ke server yang memiliki database sampel Northwind SQL Server.

Membuat formulir

Untuk membuat formulir master/detail

Buat kelas yang berasal dari Form dan berisi dua DataGridView kontrol dan dua BindingSource komponen. Kode berikut menyediakan inisialisasi formulir dasar dan menyertakan Main metode . Jika Anda menggunakan desainer Visual Studio untuk membuat formulir, Anda dapat menggunakan kode yang dihasilkan perancang alih-alih kode ini, tetapi pastikan untuk menggunakan nama yang ditampilkan dalam deklarasi variabel di sini.

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

Terapkan metode dalam definisi kelas formulir Anda untuk menangani detail menyambungkan ke database. Contoh ini menggunakan GetData metode yang mengisi DataSet objek, menambahkan DataRelation objek ke himpunan data, dan mengikat BindingSource komponen. Pastikan untuk mengatur variabel connectionString ke nilai yang sesuai untuk database Anda.

Penting

Menyimpan informasi sensitif, seperti kata sandi, dalam string koneksi dapat memengaruhi keamanan aplikasi Anda. Menggunakan Autentikasi Windows (juga dikenal sebagai keamanan terintegrasi) adalah cara yang lebih aman untuk mengontrol akses ke database. Untuk informasi lebih lengkap, lihat Melindungi Informasi Koneksi.

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

Terapkan handler untuk peristiwa formulir Load Anda yang mengikat DataGridView kontrol ke BindingSource komponen dan memanggil GetData metode . Contoh berikut menyertakan kode yang mengubah ukuran kolom agar pas DataGridView dengan data yang ditampilkan.

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

Menguji Aplikasi

Anda sekarang dapat menguji formulir untuk memastikan formulir tersebut berulah seperti yang diharapkan.

Untuk menguji formulir

Kompilasi dan jalankan aplikasi.

Anda akan melihat dua DataGridView kontrol, satu di atas yang lain. Di atas adalah pelanggan dari tabel Northwind Customers , dan di bagian bawah sesuai Orders dengan pelanggan yang dipilih. Saat Anda memilih baris yang berbeda di bagian atas DataGridView, konten perubahan yang lebih rendah DataGridView sesuai.

Langkah berikutnya

Aplikasi ini memberi Anda pemahaman DataGridView dasar tentang kemampuan kontrol. Anda dapat menyesuaikan tampilan dan perilaku kontrol dengan DataGridView beberapa cara:

Ubah gaya batas dan header. Untuk informasi selengkapnya, lihat Cara: Mengubah Gaya Batas dan Garis Kisi di Kontrol Formulir Windows DataGridView.
Aktifkan atau batasi input pengguna ke DataGridView kontrol. Untuk informasi selengkapnya, lihat Cara: Mencegah Penambahan dan Penghapusan Baris di Kontrol Formulir Windows DataGridView, dan Cara: Membuat Kolom Baca-Saja di Formulir Windows Kontrol DataGridView.
Validasi input pengguna ke DataGridView kontrol. Untuk informasi selengkapnya, lihat Panduan: Memvalidasi Data di Formulir Windows Kontrol DataGridView.
Tangani himpunan data yang sangat besar menggunakan mode virtual. Untuk informasi selengkapnya, lihat Panduan: Menerapkan Mode Virtual di Formulir Windows Kontrol DataGridView.
Sesuaikan tampilan sel. Untuk informasi selengkapnya, lihat Cara: Menyesuaikan Tampilan Sel di Formulir Windows Kontrol DataGridView dan Cara: Mengatur Gaya Sel Default untuk Kontrol Formulir Windows DataGridView.

Bagikan melalui