Xceed DataGrid for WPF v7.3 Documentation
Welcome to Xceed DataGrid, Editors, and 3D Views for WPF v7.3 / Xceed DataGrid for WPF / Code Snippets / Binding to a Master/Detail Data Table

In This Topic
    Binding to a Master/Detail Data Table
    In This Topic

    The following example demonstrates how to bind a grid to a DataTable that contains DataRelations that will be displayed as child and grandchild detail data.

    The code below demonstrates how to create a connection to the Access version of the Northwind database and create a property named "Employees" that retrieves its values from the Employees data table and to which a child and grandchild detail are added.

    VB.NET
    Copy Code
    Shared Sub New()
      Dim dataSet As New DataSet()
      Dim mdbfile As String = "Data\Northwind.mdb"
      Dim connString As String = String.Format("Provider=Microsoft.ACE.OLEDB.12.0; Data Source={0}", mdbfile)
      Dim conn As New OleDbConnection(connString)
      Dim adapter As New OleDbDataAdapter()
      m_adapter = New OleDbDataAdapter()
      m_adapter.SelectCommand = New OleDbCommand( "SELECT * FROM Employees;", conn )
      m_adapter.Fill( dataSet, "Employees" )
      m_employees = dataSet.Tables( "Employees" )
      m_adapter = New OleDbDataAdapter()
      m_adapter.SelectCommand = New OleDbCommand( "SELECT * FROM Orders;", conn )
      m_adapter.Fill( dataSet, "Orders" )
      m_orders = dataSet.Tables( "Orders" )
     
      m_adapter = New OleDbDataAdapter()
      m_adapter.SelectCommand = New OleDbCommand( "SELECT * FROM [Order Details];", conn )
      m_adapter.Fill( dataSet, "Order Details" )
      m_orderDetails = dataSet.Tables( "Order Details" )
      m_employees.ChildRelations.Add( New DataRelation( "Employee_Orders", m_employees.Columns( "EmployeeID" ), m_orders.Columns( "EmployeeID" ) ) )
      m_orders.ChildRelations.Add( New DataRelation( "Order_OrderDetails", m_orders.Columns( "OrderID" ), m_orderDetails.Columns( "OrderID" ) ) )
    End Sub
    Public Shared ReadOnly Property Employees As DataTable
      Get
        Return m_employees
       End Get
    End Property
    Private Shared m_employees As DataTable
    Private Shared m_orders As DataTable
    Private Shared m_orderDetails As DataTable
    Private Shared m_adapter As OleDbDataAdapter = Nothing
    C#
    Copy Code
    static App()
    {
     DataSet dataSet = new DataSet();
     string mdbFile = @"Data\Northwind.mdb";
     string connString = String.Format( "Provider=Microsoft.ACE.OLEDB.12.0; Data Source={0}", mdbFile );
     OleDbConnection conn = new OleDbConnection( connString );
     m_adapter = new OleDbDataAdapter();
     m_adapter.SelectCommand = new OleDbCommand( "SELECT * FROM Employees;", conn );
     m_adapter.Fill( dataSet, "Employees" );
     m_employees = dataSet.Tables[ "Employees" ];    
      m_adapter = new OleDbDataAdapter();
      m_adapter.SelectCommand = new OleDbCommand( "SELECT * FROM Orders;", conn );
      m_adapter.Fill( dataSet, "Orders" );
      m_orders = dataSet.Tables[ "Orders" ];
     
      m_adapter = new OleDbDataAdapter();
      m_adapter.SelectCommand = new OleDbCommand( "SELECT * FROM [Order Details];", conn );
      m_adapter.Fill( dataSet, "Order Details" );
      m_orderDetails = dataSet.Tables[ "Order Details" ];
     m_employees.ChildRelations.Add( new DataRelation( "Employee_Orders", m_employees.Columns[ "EmployeeID" ], m_orders.Columns[ "EmployeeID" ] ) );
     m_orders.ChildRelations.Add( new DataRelation( "Order_OrderDetails", m_orders.Columns[ "OrderID" ], m_orderDetails.Columns[ "OrderID" ] ) );  
    }
    public static DataTable Employees
    {
     get
     {
       return m_employees;
      }
    }
    private static DataTable m_employees;
    private static DataTable m_orders;
    private static DataTable m_orderDetails;
    private static OleDbDataAdapter m_adapter = null;

    The following code demonstrates how to bind the grid to the Employees property and provide a detail configuration for both detail relations to change their title and the item-container style of the first child detail.

    XAML
    Copy Code
    <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
          xmlns:local="clr-namespace:Xceed.Wpf.Documentation">
     <Grid.Resources>
        <xcdg:DataGridCollectionViewSource x:Key="cvs_employees"
                                           Source="{Binding Source={x:Static Application.Current},
                                                            Path=Employees}"/>   
         <xcdg:IndexToOddConverter x:Key="rowIndexConverter" />
      
         <Style x:Key="alternatingDataRowStyle" TargetType="{x:Type xcdg:DataRow}">
            <Style.Triggers>
               <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},
                                      Path=(xcdg:DataGridVirtualizingPanel.ItemIndex),
                                      Converter={StaticResource rowIndexConverter}}"
                            Value="True">
                  <Setter Property="Background" Value="AliceBlue"/>                   
               </DataTrigger>
            </Style.Triggers>
         </Style>
      </Grid.Resources>
     <xcdg:DataGridControl x:Name="EmployeesGrid"
                           ItemsSource="{Binding Source={StaticResource cvs_employees}}"
                           AutoCreateDetailConfigurations="True">  
        <xcdg:DataGridControl.Columns>
           <xcdg:Column FieldName="Photo"
                        Visible="False" />
        </xcdg:DataGridControl.Columns>
        <xcdg:DataGridControl.DetailConfigurations>
           <xcdg:DetailConfiguration RelationName="Employee_Orders"
                                     Title="Employee Orders"
                                     ItemContainerStyle="{StaticResource alternatingDataRowStyle}">
              <xcdg:DetailConfiguration.Columns>
                 <xcdg:Column FieldName="EmployeeID"
                              Visible="False" />
              </xcdg:DetailConfiguration.Columns>
              <xcdg:DetailConfiguration.DetailConfigurations>
                 <xcdg:DetailConfiguration RelationName="Order_OrderDetails"
                                           Title="Order Details"/>                   
              </xcdg:DetailConfiguration.DetailConfigurations>
          </xcdg:DetailConfiguration>
        </xcdg:DataGridControl.DetailConfigurations>       
     </xcdg:DataGridControl>
    </Grid>