Tutorial: Crear un formulario principal-detalle mediante dos controles DataGridView de formularios Windows Forms

Artículo
08/10/2011

Uno de los escenarios más comunes para utilizar el control DataGridView es el formulario principal-detalle, en el que se muestra una relación primaria-secundaria entre dos tablas de base de datos. Al seleccionar filas en la tabla primaria se provoca que la tabla secundaria se actualice con los datos secundarios correspondientes.

Implementar un formulario principal/detalle es sencillo con la interacción entre el control DataGridView y el componente BindingSource. En este tutorial, compilará el formulario mediante dos controles DataGridView y dos componentes BindingSource. El formulario mostrará dos tablas relacionadas en la base de datos de ejemplo Northwind de SQL Server: Customers y Orders. Cuando termine, tendrá un formulario que muestra todos los clientes de la base de datos en el DataGridView principal y todos los pedidos del cliente seleccionado en el DataGridView detalle.

Para copiar el código de este tema como un listado sencillo, vea Cómo: Crear un formulario principal-detalle mediante dos controles DataGridView de formularios Windows Forms.

Requisitos previos

Para poder completar este tutorial, necesitará:

Acceso a un servidor con la base de datos de ejemplo Northwind de SQL Server.

Crear el formulario

Para crear un formulario principal-detalle

Cree una clase que deriva de Form y contiene dos controles DataGridView y dos componentes BindingSource. En el ejemplo de código siguiente se proporciona la inicialización básica y se incluye un método Main. Si utiliza el diseñador de Visual Studio para crear el formulario, puede utilizar el código generado del diseñador en lugar de este código, pero asegúrese de que utiliza aquí los nombres mostrados en las declaraciones de variable.

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


...


}

Implemente un método en la definición de clase del formulario para controlar los detalles de conexión con la base de datos. Este ejemplo utiliza un método GetData que rellena un objeto DataSet, agrega un objeto DataRelation al conjunto de datos y enlaza los componentes BindingSource. Asegúrese de establecer la variable connectionString en un valor que sea adecuado para la base de datos.

Nota sobre la seguridad
El hecho de almacenar información confidencial, como una contraseña, en la cadena de conexión puede afectar a la seguridad de la aplicación. El uso de la autenticación de Windows (también conocida como seguridad integrada) es un modo más seguro de controlar el acceso a una base de datos. Para obtener más información, vea Proteger la información de conexión (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.");
    }
}

Implemente un controlador para el evento Load del formulario que enlaza los controles DataGridView a los componentes BindingSource y llama al método GetData. El ejemplo siguiente incluye código que cambia el tamaño de columnas DataGridView para ajustar los datos mostrados.

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

Probar la aplicación

Puede comprobar el formulario para asegurarse de que se comporta de la forma prevista.

Para comprobar el formulario

Compile y ejecute la aplicación.

Verá dos controles DataGridView, uno sobre el otro. En la parte superior están los clientes de la tabla Customers de Northwind y en la parte inferior están los Orders (pedidos) que corresponden al cliente seleccionado. A medida que selecciona distintas filas en el DataGridView superior, el contenido del DataGridView inferior cambia de modo correspondiente.

Pasos siguientes

Esta aplicación proporciona conocimientos básicos sobre las funciones del control DataGridView. Puede personalizar la apariencia y el comportamiento del control DataGridView de varias formas:

Cambie los estilos de borde y encabezado. Para obtener más información, vea Cómo: Cambiar los estilos de borde y línea de la cuadrícula en el control DataGridView de formularios Windows Forms.
Permita o restringa los datos proporcionados por el usuario al control DataGridView. Para obtener más información, vea Cómo: Impedir la adición y eliminación de filas en el control DataGridView de formularios Windows Forms y Cómo: Crear columnas de sólo lectura en el control DataGridView de formularios Windows Forms.
Valide los datos proporcionados por el usuario al control DataGridView. Para obtener más información, vea Tutorial: Validar datos en el control DataGridView de formularios Windows Forms.
Controle conjuntos de grandes volúmenes de datos utilizando el modo virtual. Para obtener más información, vea Tutorial: Implementar el modo virtual en el control DataGridView de formularios Windows Forms.
Personalice la apariencia de las celdas. Para obtener más información, vea Cómo: Personalizar la apariencia de las celdas en el control DataGridView de formularios Windows Forms y Cómo: Establecer estilos de celda predeterminados para el control DataGridView de formularios Windows Forms.

Vea también

Compartir a través de

Tutorial: Crear un formulario principal-detalle mediante dos controles DataGridView de formularios Windows Forms

Requisitos previos

Crear el formulario

Para crear un formulario principal-detalle

Probar la aplicación

Para comprobar el formulario

Pasos siguientes

Vea también

Tareas

Referencia

Conceptos

Otros recursos

Recursos adicionales