Procédure pas à pas : création d'un formulaire maître/détail qui utilise deux contrôles DataGridView Windows Forms

Article
08/10/2011

L'un des scénarios les plus communs d'utilisation du contrôle DataGridView est le formulaire maître/détail qui présente une relation parent/enfant entre deux tables de base de données. La sélection de lignes dans la table principale entraîne la mise à jour de la table secondaire avec les données enfants correspondantes.

L'implémentation d'un formulaire maître/détail est facile à l'aide de l'interaction entre le contrôle DataGridView et le composant BindingSource. Dans cette procédure pas à pas, vous générerez le formulaire à l'aide de deux contrôles DataGridView et de deux composants BindingSource. Le formulaire montrera deux tables connexes dans l'exemple de base de données de SQL Server Northwind : Customers et Orders. Lorsque vous aurez terminé, vous disposerez d'un formulaire présentant tous les clients de la base de données dans le DataGridView maître et toutes les commandes pour le client sélectionné dans le DataGridView détail.

Pour copier le code dans cette rubrique sous forme de liste unique, consultez Comment : créer un formulaire maître/détail utilisant deux contrôles DataGridView Windows Form.

Composants requis

Pour exécuter cette procédure pas à pas, vous devrez avoir :

Accès à un serveur sur lequel est installé l'exemple de base de données SQL Server Northwind

Création du formulaire.

Pour créer un formulaire maître/détail

Créez une classe qui dérive de Form et contient deux contrôles DataGridView et deux composants BindingSource. Le code suivant fournit l'initialisation de base et inclut une méthode Main. Si vous utilisez le concepteur Visual Studio pour créer votre formulaire, vous pouvez utiliser le code généré par le concepteur au lieu de celui-ci, mais veillez à utiliser les noms indiqués dans les déclarations de variables ci-dessous.

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


...


}

Implémentez une méthode dans la définition de classe de votre formulaire pour gérer les détails de la connexion à la base de données. Cet exemple utilise une méthode GetData qui remplit un objet DataSet, ajoute un objet DataRelation au jeu de données et lie les composants BindingSource. Veillez à définir la variable connectionString avec une valeur appropriée pour votre base de données.

Note de sécurité
Le stockage d'informations sensibles, comme un mot de passe, dans la chaîne de connexion peut affecter la sécurité de votre application. L'utilisation de l'authentification Windows (également qualifiée de sécurité intégrée) constitue un moyen plus sûr de contrôler l'accès à une base de données. Pour plus d'informations, consultez Protection des informations de connexion (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.");
    }
}

Implémentez un gestionnaire pour l'événement Load de votre formulaire qui lie les contrôles DataGridView aux composants BindingSource et appelle la méthode GetData. L'exemple suivant comprend un code qui redimensionne les colonnes DataGridView en fonction des données affichées.

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

Test de l'application

Vous pouvez à présent tester le formulaire afin de vous assurer qu'il se comporte comme prévu.

Pour tester le formulaire

Compilez et exécutez l'application.

Vous observerez deux contrôles DataGridView, l'un au-dessus de l'autre. Au-dessus se trouvent les clients de la table Customers de Northwind et au-dessous, les Orders correspondant au client sélectionné. À mesure que vous sélectionnez différentes lignes dans le DataGridView du haut, le contenu du DataGridView du bas change en conséquence.

Étapes suivantes

Cette application vous donne une présentation basique des capacités du contrôle DataGridView. Vous pouvez personnaliser l'apparence et le comportement du contrôle DataGridView de plusieurs manières :

Changez les styles de bordure et d'en-tête. Pour plus d'informations, consultez Comment : modifier les styles de bordures et de quadrillage dans le contrôle DataGridView Windows Forms.
Activez ou restreignez les entrées d'utilisateur au contrôle DataGridView. Pour plus d'informations, consultez Comment : empêcher l'ajout et la suppression de lignes dans le contrôle DataGridView Windows Forms et Comment : définir une colonne en lecture seule dans le contrôle DataGridView Windows Forms.
Validez l'entrée d'utilisateur dans le contrôle DataGridView. Pour plus d'informations, consultez Procédure pas à pas : validation des données dans le contrôle DataGridView Windows Forms.
Gérez de très grandes quantités de données à l'aide du mode virtuel. Pour plus d'informations, consultez Procédure pas à pas : implémentation du mode virtuel dans le contrôle DataGridView Windows Forms.
Personnalisez l'apparence des cellules. Pour plus d'informations, consultez Comment : personnaliser l'apparence des cellules du contrôle DataGridView Windows Forms et Comment : définir les styles de cellules par défaut pour le contrôle DataGridView Windows Forms.

Voir aussi

Partager via

Procédure pas à pas : création d'un formulaire maître/détail qui utilise deux contrôles DataGridView Windows Forms

Composants requis

Création du formulaire.

Pour créer un formulaire maître/détail

Test de l'application

Pour tester le formulaire

Étapes suivantes

Voir aussi

Tâches

Référence

Concepts

Autres ressources

Ressources supplémentaires