How to: Setup Simple Tabbed Details

• Jun 07, 2019
• 2 minutes to read

The following example shows how to create a new grid and set up Master-Detail data representation in code. When setting up a Master-Detail hierarchy, a detail grid and a custom detail section are placed within a tabbed container. So, the following Detail Descriptor types are used: DataControlDetailDescriptor, ContentDetailDescriptor, and TabViewDetailDescriptor.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/create-details-with-a-grid-and-custom-content-and-put-them-in-a-tabbed-container-e4031.

MainWindow.xaml

<dxg:GridControl Grid.Row="0" Name="gridControl1" AutoGenerateColumns="AddNew" >
    <dxg:GridControl.View>
        <dxg:TableView DetailHeaderContent="Employees" AutoWidth="True" ShowGroupPanel="False"  />
    </dxg:GridControl.View>
    <dxg:GridControl.DetailDescriptor>
        <dxg:TabViewDetailDescriptor>
            <dxg:TabViewDetailDescriptor.DetailDescriptors>
                <dxg:DataControlDetailDescriptor ItemsSourcePath="Orders">
                    <dxg:DataControlDetailDescriptor.DataControl>
                        <dxg:GridControl AutoGenerateColumns="AddNew">
                            <dxg:GridControl.View>
                                <dxg:TableView DetailHeaderContent="Orders" AutoWidth="True" ShowGroupPanel="False" />
                            </dxg:GridControl.View>
                        </dxg:GridControl>
                    </dxg:DataControlDetailDescriptor.DataControl>
                </dxg:DataControlDetailDescriptor>
                <dxg:ContentDetailDescriptor ContentTemplate="{StaticResource EmployeeNotes}" HeaderContent="Notes">
                </dxg:ContentDetailDescriptor>
            </dxg:TabViewDetailDescriptor.DetailDescriptors>
        </dxg:TabViewDetailDescriptor>
    </dxg:GridControl.DetailDescriptor>
</dxg:GridControl>

MainWindow.xaml.cs

private void Button_Click(object sender, RoutedEventArgs e)
{
    GridControl newGrid = CreateGrid();
    AddDetailsToGrid(newGrid);
    Grid.SetRow(newGrid, 2);
    mainGrid.Children.Add(newGrid);
}
private GridControl CreateGrid()
{
    GridControl newGrid = new GridControl();
    newGrid.AutoGenerateColumns = AutoGenerateColumnsMode.AddNew;
    newGrid.View = new TableView();
    (newGrid.View as TableView).AutoWidth = true;
    (newGrid.View as TableView).ShowGroupPanel = false;
    newGrid.View.DetailHeaderContent = "Employees";
    newGrid.ItemsSource = Employees;
    return newGrid;
}

private void AddDetailsToGrid(GridControl grid)
{
    DataControlDetailDescriptor dataControlDetail = new DataControlDetailDescriptor();
    dataControlDetail.ItemsSourcePath = "Orders";

    GridControl detailGrid = new GridControl();
    dataControlDetail.DataControl = detailGrid;
    detailGrid.AutoGenerateColumns = AutoGenerateColumnsMode.AddNew;
    detailGrid.View.DetailHeaderContent = "Orders";
    (detailGrid.View as TableView).ShowGroupPanel = false;

    ContentDetailDescriptor contentDetail = new ContentDetailDescriptor();
    contentDetail.ContentTemplate = (DataTemplate)FindResource("EmployeeNotes");
    contentDetail.HeaderContent = "Notes";

    TabViewDetailDescriptor tabDetail = new TabViewDetailDescriptor();
    tabDetail.DetailDescriptors.Add(dataControlDetail);
    tabDetail.DetailDescriptors.Add(contentDetail);

    grid.DetailDescriptor = tabDetail;
}

MainWindow.xaml.vb

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim newGrid As GridControl = CreateGrid()
    AddDetailsToGrid(newGrid)
    Grid.SetRow(newGrid, 2)
    mainGrid.Children.Add(newGrid)
End Sub
Private Function CreateGrid() As GridControl
    Dim newGrid As New GridControl()
    newGrid.AutoGenerateColumns = AutoGenerateColumnsMode.AddNew
    newGrid.View = New TableView()
    TryCast(newGrid.View, TableView).AutoWidth = True
    TryCast(newGrid.View, TableView).ShowGroupPanel = False
    newGrid.View.DetailHeaderContent = "Employees"
    newGrid.ItemsSource = Employees
    Return newGrid
End Function

Private Sub AddDetailsToGrid(ByVal grid As GridControl)
    Dim dataControlDetail As New DataControlDetailDescriptor()
    dataControlDetail.ItemsSourcePath = "Orders"

    Dim detailGrid As New GridControl()
    dataControlDetail.DataControl = detailGrid
    detailGrid.AutoGenerateColumns = AutoGenerateColumnsMode.AddNew
    detailGrid.View.DetailHeaderContent = "Orders"
    TryCast(detailGrid.View, TableView).ShowGroupPanel = False

    Dim contentDetail As New ContentDetailDescriptor()
    contentDetail.ContentTemplate = CType(FindResource("EmployeeNotes"), DataTemplate)
    contentDetail.HeaderContent = "Notes"

    Dim tabDetail As New TabViewDetailDescriptor()
    tabDetail.DetailDescriptors.Add(dataControlDetail)
    tabDetail.DetailDescriptors.Add(contentDetail)

    grid.DetailDescriptor = tabDetail
End Sub