How to: Create a Master-Detail Grid

• Jun 07, 2019
• 3 minutes to read

The following example demonstrates how to create a master-detail grid.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-master-detail-grid-e1000.

Window1.xaml

<Window x:Class="MasterDetailInside.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:local="clr-namespace:MasterDetailInside" 
        Title="Window1" Height="500" Width="700">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <dxg:GridControl x:Name="grid" ItemsSource="{Binding Path=Data}" AutoGenerateColumns="AddNew">
        <dxg:GridControl.DetailDescriptor>
            <dxg:DataControlDetailDescriptor ItemsSourceBinding="{Binding Data}">
                <dxg:GridControl AutoGenerateColumns="AddNew"/>
            </dxg:DataControlDetailDescriptor>
        </dxg:GridControl.DetailDescriptor>
    </dxg:GridControl>
</Window>

ViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace MasterDetailInside {
    public class ViewModel {
        List<ParentTestData> data;
        public List<ParentTestData> Data {
            get {
                if(data == null){
                    data = new List<ParentTestData>();
                    for(int i = 0; i < 100; i++) {
                        ParentTestData parentTestData = new ParentTestData() { Text = "Master" + i, Number = i, Data = new List<TestData>() };
                        for(int j = 0; j < 50; j++)
                            parentTestData.Data.Add(new TestData() { Text = "Detail" + j + " Master" + i, Number = j, Ready = j % 2 != 0 });
                        data.Add(parentTestData);
                    }
                }
                return data;
            }
        }
    }

    public class TestData {
        public bool Ready { get; set; }
        public string Text { get; set; }
        public int Number { get; set; }
    }
    public class ParentTestData {
        public string Text { get; set; }
        public int Number { get; set; }
        public List<TestData> Data { get; set; }
    }
}

Application.xaml.vb

Imports System.Windows

Namespace MasterDetailInside
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application

    End Class
End Namespace

Application.xaml

<Application x:Class="MasterDetailInside.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Window1.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

ViewModel.vb

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text

Namespace MasterDetailInside
    Public Class ViewModel

        Private data_Renamed As List(Of ParentTestData)
        Public ReadOnly Property Data() As List(Of ParentTestData)
            Get
                If data_Renamed Is Nothing Then
                    data_Renamed = New List(Of ParentTestData)()
                    For i As Integer = 0 To 99
                        Dim parentTestData As New ParentTestData() With { _
                            .Text = "Master" & i, _
                            .Number = i, _
                            .Data = New List(Of TestData)() _
                        }
                        For j As Integer = 0 To 49
                            parentTestData.Data.Add(New TestData() With { _
                                .Text = "Detail" & j & " Master" & i, _
                                .Number = j, _
                                .Ready = j Mod 2 <> 0 _
                            })
                        Next j
                        data_Renamed.Add(parentTestData)
                    Next i
                End If
                Return data_Renamed
            End Get
        End Property
    End Class

    Public Class TestData
        Public Property Ready() As Boolean
        Public Property Text() As String
        Public Property Number() As Integer
    End Class
    Public Class ParentTestData
        Public Property Text() As String
        Public Property Number() As Integer
        Public Property Data() As List(Of TestData)
    End Class
End Namespace