Instruções passo a passo: criando um formulário mestre/detalhes usando dois controles DataGridView do Windows Forms

  • Artigo

Um dos cenários mais comuns para usar o controle é o DataGridViewformulário mestre/detalhe , no qual uma relação pai/filho entre duas tabelas de banco de dados é exibida. Seleção de linhas na tabela mestra faz com que a tabela de detalhes sejam atualizadas com os dados filho correspondentes.

A implementação de um formulário mestre/detalhe é fácil usando a interação entre o controle e o DataGridViewBindingSource componente. Nesta explicação passo a passo, você criará o formulário usando dois controles e dois DataGridViewBindingSource componentes. O formulário mostrará duas tabelas relacionadas no banco de dados de exemplo SQL Server Northwind: Customers e Orders. Quando terminar, você terá um formulário que mostra todos os clientes no banco de dados no mestre DataGridView e todos os pedidos para o cliente selecionado no detalhe DataGridView.

Para copiar o código neste tópico como uma única listagem, consulte Como criar um formulário mestre/detalhes usando dois controles DataGridView dos Windows Forms.

Pré-requisitos

Para concluir este passo a passo, você precisará de:

  • Acesso a um servidor com o banco de dados de exemplo Northwind do SQL Server.

Criar o formulário

Para criar um formulário mestre/detalhes

  1. Crie uma classe que deriva de Form e contém dois controles e dois BindingSourceDataGridView componentes. O código a seguir fornece inicialização de formulário básica e inclui um método Main. Se você usar o designer do Visual Studio para criar seu formulário, você pode usar o código gerado pelo designer em vez desse código, mas certifique-se de usar os nomes mostrados nas declarações de variável aqui.

    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. Implemente um método na sua definição de classe do formulário para manipular os detalhes da conexão ao banco de dados. Este exemplo usa um método que preenche um objeto, adiciona um GetDataDataSetDataRelation objeto ao conjunto de dados e vincula os BindingSource componentes. Certifique-se de definir a variável de connectionString como um valor que seja apropriada para o base de dados.

    Importante

    O armazenamento das informações confidenciais, como uma senha, dentro da cadeia de conexão pode afetar a segurança do aplicativo. O uso da Autenticação do Windows (também conhecida como segurança integrada) é uma maneira mais segura de controlar o acesso a um banco de dados. Para obter mais informações, consulte Protegendo informações de conexão.

    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. Implemente um manipulador para o evento do Load formulário que vincula os DataGridView controles aos BindingSource componentes e chama o GetData método. O exemplo a seguir inclui código que redimensiona DataGridView colunas para ajustar os dados exibidos.

    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

Testando o aplicativo

Agora, é possível testar o formulário para garantir que ele se comporta da forma esperada.

Para testar o formulário

  • Compile e execute o aplicativo.

    Você verá dois DataGridView controles, um acima do outro. Na parte superior estão os clientes da tabela Customers Northwind e na parte inferior estão os Orders correspondentes ao cliente selecionado. À medida que você seleciona linhas diferentes na parte superior, o conteúdo da parte DataGridViewinferior DataGridView muda de acordo.

Próximas etapas

Esta aplicação dá-lhe uma compreensão básica das DataGridView capacidades do controle. Você pode personalizar a aparência e o DataGridView comportamento do controle de várias maneiras:

Confira também