# Hierarchical Mode

## Content

List allows you to display hierarchical data. Hierarchical data refers to data stored in multiple relational tables, where a master (or "parent") table is linked by key fields to detail (or "child") tables. The hierarchical display provides the ability to present the master data to users, such that the related detail data can be viewed in the same list with a single mouse click.

The following GIF shows how you can display hierarchical data using the List and Combo controls.

![Hierarchical Data](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/hierarchical-data.gif)

Use the following steps to display hierarchical data in the List control. The following example uses the **List** and **Combo** controls to display master-detail relationship in the List control.

## Set Up the Application

1. Create a new **Windows Forms App** **(.NET** or **.NET Framework**) and set the project framework to **.NET 6.0** for .NET application and **.NET 4.5.2** for .NET Framework application using **Configure your new project** window.
2. Add reference to the List assembly in your application by installing **C1.Win.List** NuGet package ( for .NET app) or adding **C1.Win.List** dll (for .NET Framework app).
3. Drag and drop the List and Combo controls from **Toolbox** onto the Form.

## Bind to a Data Source

1. Bind the Combo control to a data source at design time. For more information on data binding, see [Data Binding](/componentone/docs/win/online-list/integrationwithc1combo/databindingcombobox) in C1Combo. In this example, we have used the **Last** field of the **Composer** table to bind the Combo control.
    This adds a dataset, and a connection string to your project. With this, the following code gets generated automatically to fill the dataset:

    ```csharp
    // TODO: This line of code loads data into the 'dataSet1.Composer' table. You can move, or remove it, as needed.
    this.composerTableAdapter.Fill(this.dataSet1.Composer);
    ```

<br>
2. Bind the List control to a data source at design time. For more information on data binding, see [Binding to a Data Source](/componentone/docs/win/online-list/listforwinformsquick) in Quick Start topic. In this example, we have used the **Opus** table for binding the list control.
    This adds a dataset, and a connection string to your project. With this, the following code gets generated automatically to fill the dataset:

    ```csharp
    // TODO: This line of code loads data into the 'dataSet2.Opus' table. You can move, or remove it, as needed.
    this.opusTableAdapter.Fill(this.dataSet2.Opus);
    ```

## Display Hierarchical Data

1. Subscribe to **RowChange** event of the [C1Combo](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1Combo.html) class, and add the following code to the **C1Combo1\_RowChange** event handler. This event gets fired when the user changes a row in the Combo control.

    ```csharp
    private void C1Combo1_RowChange(object sender, EventArgs e)
    {
        DataRow[] dr = this.dataSet2.Opus.Select("Last ='" + this.c1Combo1.Text + "'");
        DataSet2.OpusDataTable tb = new DataSet2.OpusDataTable();
        foreach (DataRow item in dr)
        {
            tb.ImportRow(item);
        }
        //modifies the data source of the list control
        this.c1List1.DataSource = tb;
    }
    ```