Xceed DataGrid for WPF v7.2 Documentation
Binding to a Master/Detail Data Table

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

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>

 

 

 

Copyright Xceed Software Inc

Send Feedback