How can I create a Complex View Like this one in WPF DataGridView C#?

Question

How can I create a Complex View Like this one in WPF DataGridView C#?

Mesh Ka 200

I created this Example and Tried to make it as Simple as Possible so that you can Understand Clearly.

I have SQL Server Database Named EmployeesDB that contains 4 Tables as following:

1. Employees Table which is the Parent Table in this Example.

2. EmployeesContacts Table Which is the Child Table of Employees holding employee Telephone Numbers because most of the Employees have more than One Telephone Numbers.

3. EmployeesLanguages Table Which is the Child Table of Employees holding The Languages of the Employees and their Ability to Talk, Read and Write in those languages.

4. EmployeesDuties Table Which is the Child Table of Employees holding the Duties of all the Employees in the Company.

DatabaseDiagram

Here is the Database Script:

USE [EmployeesDB]
GO

/****** Object:  Table [dbo].[Employees] ******/

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Employees](
	[EmployeeID] [int] IDENTITY(1,1) NOT NULL,
	[FirstName] [nvarchar](50) NULL,
	[LastName] [nvarchar](50) NULL,
	[Age] [int] NULL,
	[Gender] [nvarchar](10) NULL,
	[Email] [nvarchar](200) NULL,
 CONSTRAINT [PK_Employees] PRIMARY KEY CLUSTERED 
(
	[EmployeeID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

/****** Object:  Table [dbo].[EmployeesContacts]  ******/

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[EmployeesContacts](
	[EmployeeID] [int] NOT NULL,
	[Telephone] [nvarchar](12) NOT NULL,
 CONSTRAINT [PK_EmployeesContacts] PRIMARY KEY CLUSTERED 
(
	[Telephone] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

/****** Object:  Table [dbo].[EmployeesDuties] ******/

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[EmployeesDuties](
	[EmployeeID] [int] NOT NULL,
	[EmployeeDutyID] [int] IDENTITY(1,1) NOT NULL,
	[Duty] [nvarchar](20) NOT NULL,
 CONSTRAINT [PK_EmployeesDuties] PRIMARY KEY CLUSTERED 
(
	[EmployeeDutyID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

/****** Object:  Table [dbo].[EmployeesLanguages] ******/

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[EmployeesLanguages](
	[EmployeeID] [int] NOT NULL,
	[EmployeeLanguageID] [int] IDENTITY(1,1) NOT NULL,
	[LanguageName] [nvarchar](50) NULL,
	[TalkingAbility] [nvarchar](20) NULL,
	[ReadingAbility] [nvarchar](20) NULL,
	[WritingAbility] [nvarchar](20) NULL,
 CONSTRAINT [PK_EmployeesLanguages] PRIMARY KEY CLUSTERED 
(
	[EmployeeLanguageID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO
ALTER TABLE [dbo].[EmployeesContacts]  WITH CHECK ADD  CONSTRAINT [FK_EmployeesContacts_Employees] FOREIGN KEY([EmployeeID])
REFERENCES [dbo].[Employees] ([EmployeeID])
GO
ALTER TABLE [dbo].[EmployeesContacts] CHECK CONSTRAINT [FK_EmployeesContacts_Employees]
GO
ALTER TABLE [dbo].[EmployeesDuties]  WITH CHECK ADD  CONSTRAINT [FK_EmployeesDuties_Employees] FOREIGN KEY([EmployeeID])
REFERENCES [dbo].[Employees] ([EmployeeID])
GO
ALTER TABLE [dbo].[EmployeesDuties] CHECK CONSTRAINT [FK_EmployeesDuties_Employees]
GO
ALTER TABLE [dbo].[EmployeesLanguages]  WITH CHECK ADD  CONSTRAINT [FK_EmployeesLanguages_Employees] FOREIGN KEY([EmployeeID])
REFERENCES [dbo].[Employees] ([EmployeeID])
GO
ALTER TABLE [dbo].[EmployeesLanguages] CHECK CONSTRAINT [FK_EmployeesLanguages_Employees]
GO

The Impossible thing to me Came when I turned to the UI of which I wanted the whole Data to appear in One DataGridView so that I take Advantages of the Features of DataGridView like Filter, Sort, Search e.t.c.

Here is an Example of the View I Wanted which All The Rows are in Expanded Mode:

Expanded

ColumnDetails

The Behaviours and Features I wanted are:

1. When the Rows have Sub-Rows inside (like an Employee with Many Telephone Numbers) :

a) To show this row header CollapsedIcon

(Row Collapsed Icon) at the Left Side when there is no Mouse Over and Expand All ToggleButton is false as in the Picture Below (Row 1, 2).

b) To Show this row header ExpandedIcon

(Row Expanded Icon) at the Left Side when they got Mouse Over or when Expand All ToggleButton is True as in the Picture Below (Row 3).

c) To Show this row header NoSubRowsIcon

(Row Has no Sub-Rows Icon) at the Left Side when the Rows doesn’t have Sub-Rows as in the Picture Below (Row 3, 4).

MouseOver

2. To Show “Click To Add New Row” at the End of each Sub-Rows and at The End of Parent Rows like in the pictures above.

3. When I Filter for Example Employees by Duty “Advertiser”, the Filter to Show full Data with All Sub-Rows like in the Picture below (Filtered by Duties Column).

Filtered

4. When the DataGridView is Filtered, Sorted or Searched, the Expand All ToggleButton to be True like in the picture above.

5. The Parent Rows to Have a unique border like in the Picture above.

6. The Empty Spaces where there are nothing written like Below FirstName and LastName to be Whitespace instead of Cells like in the picture above.

With all my efforts I searched google for anything similar and found Nothing, Tried SQL Server View but with no success … I will really appreciate any help in this question.

Answer 1

Hui Liu-MSFT 23,601 Microsoft Vendor

Hi,@Mesh Ka.Welcome Microsoft Q&A.

1.For sorting, filtering and grouping data in DataGrid, you could try to refer to How to: Group, sort, and filter data in the DataGrid control.

2.For the problem of clicking to expand row details, you can try to use something about DataGrid.RowDetailsTemplate You can also refer to my solution in the thread Convert DataGrid.ItemsSource to DataTable.

<DataGrid Name="dg" Width="300" AutoGenerateColumns="False">  
            <DataGrid.Columns>  
                <DataGridTextColumn Header="Name" Binding="{Binding Name}" />  
                <DataGridTextColumn Header="Birthday" Binding="{Binding Birthday}" />  
            </DataGrid.Columns>  
            <DataGrid.RowDetailsTemplate>  
                <DataTemplate>  
                    <TextBlock Text="{Binding Details}" Margin="10" />  
                </DataTemplate>  
            </DataGrid.RowDetailsTemplate>  
        </DataGrid>

3.For the problem of expanding or shrinking the RowDetails of the DataGrid through Button, you can set the DataGrid.RowDetailsVisibilityMode binding property that change by button. For more details, see How to: Display and Configure Row Details in the DataGrid Control

By the way, it is recommended that you only post one question per thread. It's best to ask specific questions.

Update:

Right-click Dependencies under the project name and select Manage Nuget Packages... and Search Microsoft.EntityFrameworkCore.SqlServer(7.0.11)

sql:

CREATE TABLE [dbo].[EmployeesContacts] (
    [TelephoneID] INT           IDENTITY (1, 1) NOT NULL,
    [EmployeeID]  INT           NOT NULL,
    [Telephone]   NVARCHAR (12) NOT NULL,
    CONSTRAINT [PK_EmployeesContacts] PRIMARY KEY CLUSTERED ([TelephoneID] ASC),
    CONSTRAINT [FK_EmployeesContacts_Employees] FOREIGN KEY ([EmployeeID]) REFERENCES [dbo].[Employees] ([EmployeeID])
);

xaml:

 <Window.Resources>
        <CollectionViewSource x:Key="CvsKey">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Employee"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
        
    </Window.Resources>

    <Grid>
        <DataGrid AutoGenerateColumns="False" x:Name="dataGrid1" ItemsSource="{Binding Employees}" IsReadOnly="True" RowDetailsVisibilityMode="Collapsed"
                          
                  CanUserAddRows="True">

            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding EmployeeID}" Header="EmployeeID"/>
                <DataGridTextColumn Binding="{Binding FirstName}" Header="FirstName"/>
                <DataGridTextColumn Binding="{Binding LastName}" Header="LastName"/>
                <DataGridTextColumn Binding="{Binding Age}" Header="Age"/>
                <DataGridTextColumn Binding="{Binding Gender}" Header="Gender"/>
                <DataGridTextColumn Binding="{Binding Email}" Header="Email"/>
                <DataGridTemplateColumn Header="Contects"  Width="75">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DataGrid ItemsSource="{Binding Contacts}" IsReadOnly="True" AutoGenerateColumns="False" HeadersVisibility="None">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="*">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding Telephone}"/>
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="Duties"  Width="75">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DataGrid ItemsSource="{Binding Duties}" IsReadOnly="True" AutoGenerateColumns="False" HeadersVisibility="None">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="*">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding Duty}"/>
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="Languages"  Width="75">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DataGrid ItemsSource="{Binding Languages}" IsReadOnly="True" AutoGenerateColumns="False" HeadersVisibility="None">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="*">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding LanguageName}"/>
                                                
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>

        </DataGrid>
    </Grid>

Codebedhind:

using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Windows;
using System.Windows.Input;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        private EmployeeViewModel _viewModel;

        public MainWindow()
        {
            InitializeComponent();
            _viewModel = new EmployeeViewModel();
            DataContext = _viewModel;
        }
    }

    public class EmployeeViewModel
    {
        private readonly EmployeeDbContext _context;

        public EmployeeViewModel()
        {


            using (var context = new EmployeeDbContext())
            {
                Employees = context.Employees
                       .Include(e => e.Duties)
                    .Include(e => e.Contacts)

                    .Include(e => e.Languages)
                    .ToList();


            }

        }


        public List<Employee> Employees { get; set; } = new List<Employee>();

        public void SaveChanges()
        {
            _context.SaveChanges();
        }

        // Add methods for CRUD operations as needed
    }
  
    public class EmployeeDbContext : DbContext
    {
        public DbSet<Employee> Employees { get; set; }
        public DbSet<EmployeesContact> EmployeesContacts { get; set; }
        public DbSet<EmployeesDuty> EmployeesDuties { get; set; }
        public DbSet<EmployeesLanguage> EmployeesLanguages { get; set; }




        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            // Configure your database connection here
            optionsBuilder.UseSqlServer("Data Source=(localdb)\\ProjectModels;Initial Catalog=EmployeesDB;Integrated Security=True;Connect Timeout=30;Encrypt=False;Trust Server Certificate=False;Application Intent=ReadWrite;Multi Subnet Failover=False");

        }
    }
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
        public string Gender { get; set; }
        public string Email { get; set; }

        public ObservableCollection<EmployeesContact> Contacts { get; set; }
        public ObservableCollection<EmployeesDuty> Duties { get; set; }
        public ObservableCollection<EmployeesLanguage> Languages { get; set; }
    }

    public class EmployeesContact
    {
        [Key] // Define TelephoneID as the primary key
        public int TelephoneID { get; set; }

        public int EmployeeID { get; set; }
        public string Telephone { get; set; }

        // Other properties and relationships
    }

    public class EmployeesDuty
    {
        public int EmployeeID { get; set; }

        [Key]
        public int EmployeeDutyID { get; set; }
        public string Duty { get; set; }

    }

    public class EmployeesLanguage
    {
        public int EmployeeID { get; set; }

        [Key]
        public int EmployeeLanguageID { get; set; }
        public string LanguageName { get; set; }
        public string TalkingAbility { get; set; }
        public string ReadingAbility { get; set; }
        public string WritingAbility { get; set; }

    }


}

The result:

User's image

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Mesh Ka 200 Reputation points

2023-09-20T10:19:25.6466667+00:00

@Hui Liu-MSFT Did you looked at the Pictures carefully? Before reaching Sorting, Filtering problems, the problem is that how can i create a view like that one which is a combination of parent and child tables into one Datagrid as if they are from One SQL Server Table even if it is a read only DataGridview.

And the reason why i posted all the questions in One Thread is that they are all related, if i were to ask them each one on a thread you wouldn't have understood the problem
Hui Liu-MSFT 23,601 Reputation points Microsoft Vendor

2023-09-21T09:18:19.0033333+00:00

Hi,@Mesh Ka. I've updated my current implementation of the datagrid into the answer. It could be a starting point. You can check it out.

Generally, when the data is set to one-to-many (nested collection), ComboBox will be used in the DataGrid, such as Contacts column.
Mesh Ka 200 Reputation points

2023-09-21T09:52:17.68+00:00

Hi @Hui Liu-MSFT Thanks alot for the update, I am now try to update my Codes but I have a problem with Microsoft.EntityFrameworkCore in the CodeBehind Usings, I tried to install it from Nuget Package but unfortunately there was an error because i am using .NetFramework 4.8.1, How can i solve that or is there any Other EF i can use now?

Hui Liu-MSFT 23,601 Microsoft Vendor

Hi,@Mesh Ka. For .Net Framework you could try to refer to the document Create a simple data application with WPF and Entity Framework 6.

And you could add TalkingAbility column after the Languages column as following:


  <DataGridTemplateColumn Header="TalkingAbility"  Width="70">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DataGrid ItemsSource="{Binding Languages}" IsReadOnly="True" AutoGenerateColumns="False" HeadersVisibility="None">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="*">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                              
                                                <TextBlock Text="{Binding TalkingAbility}"/>

                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

The result:

User's image

Mesh Ka 200 Reputation points

2023-09-21T10:44:16.2366667+00:00

Hi @Hui Liu-MSFT Thanks alot for the update, I will give you the feedback soon.
Mesh Ka 200 Reputation points

2023-09-21T10:58:19.31+00:00

Hi @Hui Liu-MSFT am i Missing a Reference here, I am unable to fix it
Mesh Ka 200 Reputation points

2023-09-21T16:11:41.4433333+00:00

Hi @Hui Liu-MSFT 'DbContextOptionsBuilder' does not contain a definition for 'UseSqlServer' and no accessible extension method 'UseSqlServer' accepting a first argument of type 'DbContextOptionsBuilder' could be found (are you missing a using directive or an assembly reference?)
Hui Liu-MSFT 23,601 Reputation points Microsoft Vendor

2023-09-22T02:16:22.8033333+00:00

Hi,@Mesh Ka. The error you encountered in your comment is due to the fact that you are using other packages in the case of .NET Framework, whereas I was using Microsoft.EntityFrameworkCore.SqlServer(7.0.11).

.Net Framework and .Net use different Nuget packages, and the usage methods and codes are also different.

You could follow the steps in the link I sent you to extract the data from the database and then combine the entity classes and view code of my solution.

I found documentation that was closer to my approach, which also describes data binding for WPF on .NET Framework. You can refer to Databinding with WPF.
Mesh Ka 200 Reputation points

2023-09-23T07:16:26.19+00:00

Hi @Hui Liu-MSFT Thanks a lot, it worked, the problem was that i was trying to Install Microsoft.EntityFrameworkCore(7.0..11) which doesn't have UseSqlServer method. After installing Microsoft.EntityFrameworkCore.SqlServer(7.0.11) it worked Nicely, But Filters don't work on Contacts, Duties and Languages and i thought it was impossible with DataGridTemplateColumn . . .

am i wrong?

Hui Liu-MSFT 23,601 Microsoft Vendor

To filter employees by duty, you could use a CollectionViewSource along with a filter predicate. Here's how you can achieve this:

Modify your EmployeeViewModel as follows:

public class EmployeeViewModel : INotifyPropertyChanged
{
    private string _dutyFilter;

    public string DutyFilter
    {
        get { return _dutyFilter; }
        set
        {
            if (_dutyFilter != value)
            {
                _dutyFilter = value;
                OnPropertyChanged(nameof(DutyFilter));
                ApplyFilter();
            }
        }
    }
public EmployeeViewModel()
{
    using (var context = new EmployeeDbContext())
    {
        Employees = context.Employees
            .Include(e => e.Duties)
            .Include(e => e.Contacts)
            .Include(e => e.Languages)
            .ToList();
    }


    DutyFilter = "";
} 

private ListCollectionView _filteredEmployees;

public ListCollectionView FilteredEmployees
{
    get { return _filteredEmployees; }
    set
    {
        _filteredEmployees = value;
        OnPropertyChanged(nameof(FilteredEmployees));
    }
}

private void ApplyFilter()
{
    FilteredEmployees = new ListCollectionView(Employees);
    FilteredEmployees.Filter = employee =>
    {
        var emp = (Employee)employee;
        return emp.Duties.Any(d => d.Duty.Contains(DutyFilter, StringComparison.OrdinalIgnoreCase));
    };
}
    ...
}

In your XAML, bind the DataGrid to the FilteredEmployees property:


<StackPanel>

    <StackPanel Orientation="Horizontal">
        <TextBlock Text="Enter Duty" VerticalAlignment="Center"/>
        <TextBox x:Name="txtFilter" Width="200" Margin="10" Text="{Binding DutyFilter ,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"  />
    </StackPanel>

<DataGrid AutoGenerateColumns="False" x:Name="dataGrid1" ItemsSource="{Binding FilteredEmployees}" IsReadOnly="True" RowDetailsVisibilityMode="Collapsed"

CanUserAddRows="True">



...

</DataGrid>
</StackPanel>

The result:

Mesh Ka 200 Reputation points

2023-09-25T10:33:01.5766667+00:00

Hi @Hui Liu-MSFT you are really a helping and hardworking man, Thanks for that, I will try it and give you The response. But is the Normal Filtering method on Columns like that of Excel not possible? and What about the Expands and Collapse?
Hui Liu-MSFT 23,601 Reputation points Microsoft Vendor

2023-09-26T10:00:17.5133333+00:00

Hi,@Mesh Ka . If you want to have more control over expanding and collapsing individual rows with multiple sub-rows, you would typically need to create a custom control or use a third-party DataGrid control that provides this functionality.

This approach of custom control can be quite complex and may require a significant amount of custom code. You could find and try the available third-party DataGrid controls,
Mesh Ka 200 Reputation points

2023-09-26T16:23:34.21+00:00

Hi @Hui Liu-MSFT , Can you give me a link where i can get a 3rd party control like this one?
Hui Liu-MSFT 23,601 Reputation points Microsoft Vendor

2023-09-27T07:17:28.6966667+00:00

Hi,@Mesh Ka . You could try a Google search. Due to policy reasons, I am unable to recommend third parties. It is difficult to find exactly the same UI controls; you can only try to get them as close as possible.

Hui Liu-MSFT 23,601 Microsoft Vendor

Hi,@Mesh Ka . You could try referring to the following example to expand and collapse rows. If my soluition is helpful to you, you could accept it as the answer. It's helpful for community members with related questions.


 <Window.Resources>
        <CollectionViewSource x:Key="CvsKey" >
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Employee"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
        <Style x:Key="employee" TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding}" TextWrapping="Wrap"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <StackPanel>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Enter Duty" VerticalAlignment="Center"/>
            <TextBox x:Name="txtFilter" Width="200" Margin="10" Text="{Binding DutyFilter ,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"  />
        </StackPanel>
        <DataGrid AutoGenerateColumns="False" x:Name="dataGrid1"
                  ItemsSource="{Binding FilteredEmployees}" 
                  RowDetailsVisibilityMode="Collapsed"           SelectionMode="Single"
                  SelectedItem="{Binding Path=SelectedEmployee, Mode=TwoWay}"
                  CanUserAddRows="True">
            <DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <Expander  IsExpanded="{Binding Items[0].IsExpanded}">
                                            <Expander.Header>
                                                <StackPanel>
                                                    <TextBox Text="{Binding Items[0].EmployeeID}" />
                                                </StackPanel>
                                            </Expander.Header>
                                            <ItemsPresenter />
                                        </Expander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </DataGrid.GroupStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding EmployeeID}"  Header="EmployeeID"/>
                <DataGridTextColumn Binding="{Binding FirstName}" Header="FirstName"/>
                <DataGridTextColumn Binding="{Binding LastName}" Header="LastName"/>
                <DataGridTextColumn Binding="{Binding Age}" Header="Age"/>
                <DataGridTextColumn Binding="{Binding Gender}" Header="Gender"/>
                <DataGridTextColumn Binding="{Binding Email}" Header="Email"/>
                <DataGridTemplateColumn Header="Contects"  Width="75">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DataGrid ItemsSource="{Binding Contacts}" IsReadOnly="True" AutoGenerateColumns="False" HeadersVisibility="None">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="*">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding Telephone}"/>
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="Duties"  Width="75">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DataGrid ItemsSource="{Binding Duties}" Width="120" IsReadOnly="True" AutoGenerateColumns="False" HeadersVisibility="None">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="*">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding Duty}"/>
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="Languages"  Width="170">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DataGrid ItemsSource="{Binding Languages, Mode=OneWay}"  AutoGenerateColumns="False" HeadersVisibility="None" CanUserAddRows="True">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="*">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding LanguageName}"/>
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="lan">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Expander Header="Details" IsExpanded="{Binding IsExpanded}">
                                <DataGrid ItemsSource="{Binding Languages}" AutoGenerateColumns="False" >
                                    <DataGrid.Columns>
                                        <DataGridTextColumn Header="TalkingAbility"   Binding="{Binding TalkingAbility}"    />
                                        <DataGridTextColumn Header="ReadingAbility"   Binding="{Binding ReadingAbility}"    />
                                        <DataGridTextColumn Header="WritingAbility"   Binding="{Binding WritingAbility}"    />

                                    </DataGrid.Columns>
                                </DataGrid>
                            </Expander>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                
            </DataGrid.Columns>

        </DataGrid>
    </StackPanel>

Codebedhind:


 public partial class MainWindow : Window
    {
        private EmployeeViewModel _viewModel;

        public MainWindow()
        {
            InitializeComponent();
            
            _viewModel = new EmployeeViewModel();
            DataContext = _viewModel;
        }
    }

    public class EmployeeViewModel : INotifyPropertyChanged
    {
        private readonly EmployeeDbContext _context;

    
        private string _dutyFilter;

        public string DutyFilter
        {
            get { return _dutyFilter; }
            set
            {
                if (_dutyFilter != value)
                {
                    _dutyFilter = value;
                    OnPropertyChanged(nameof(DutyFilter));
                    ApplyFilter();
                }
            }
        }

        public List<Employee> Employees { get; set; } = new List<Employee>();

        private Employee _selectedEmployee;
        public Employee SelectedEmployee
        {
            get { return _selectedEmployee; }
            set
            {
                _selectedEmployee = value;
                OnPropertyChanged("SelectedEmployee");
            }
        }
        private ListCollectionView _filteredEmployees;

        public ListCollectionView FilteredEmployees
        {
            get { return _filteredEmployees; }
            set
            {
                _filteredEmployees = value;
                OnPropertyChanged(nameof(FilteredEmployees));
                if (value != null && _filteredEmployees.Count > 0)
                    SelectedEmployee = _filteredEmployees.GetItemAt(0) as Employee;

            }
        }

        private void ApplyFilter()
        {
            FilteredEmployees = new ListCollectionView(Employees);

            FilteredEmployees.Filter = employee =>
            {
                var emp = (Employee)employee;
                return emp.Duties.Any(d => d.Duty.Contains(DutyFilter, StringComparison.OrdinalIgnoreCase));
            };
        }
       
      
        public EmployeeViewModel()
        {


            using (var context = new EmployeeDbContext())
            {
                Employees = context.Employees
                       .Include(e => e.Duties)
                    .Include(e => e.Contacts)

                    .Include(e => e.Languages)
                    .ToList();


            }
           
            DutyFilter = "";
            ListCollectionView tmp = new ListCollectionView(Employees);
            tmp.GroupDescriptions.Add(new PropertyGroupDescription("EmployeeID"));
            FilteredEmployees = tmp;
        }
       
        public void SaveChanges()
        {
            _context.SaveChanges();
        }
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string name = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }
    
    public class EmployeeDbContext : DbContext
    {
        public DbSet<Employee> Employees { get; set; }
        public DbSet<EmployeesContact> EmployeesContacts { get; set; }
        public DbSet<EmployeesDuty> EmployeesDuties { get; set; }
        public DbSet<EmployeesLanguage> EmployeesLanguages { get; set; }


        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            // Configure your database connection here
            optionsBuilder.UseSqlServer("Data Source=(localdb)\\ProjectModels;Initial Catalog=EmployeesDB;Integrated Security=True;Connect Timeout=30;Encrypt=False;Trust Server Certificate=False;Application Intent=ReadWrite;Multi Subnet Failover=False");

        }
    }
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
        public string Gender { get; set; }
        public string Email { get; set; }

        public ObservableCollection<EmployeesContact> Contacts { get; set; }
        public ObservableCollection<EmployeesDuty> Duties { get; set; }
        public ObservableCollection<EmployeesLanguage> Languages { get; set; }
    }

    public class EmployeesContact
    {
        [Key] // Define TelephoneID as the primary key
        public int TelephoneID { get; set; }

        public int EmployeeID { get; set; }
        public string Telephone { get; set; }

        // Other properties and relationships
    }

    public class EmployeesDuty
    {
        public int EmployeeID { get; set; }

        [Key]
        public int EmployeeDutyID { get; set; }
        public string Duty { get; set; }

    }

    public class EmployeesLanguage
    {
        public int EmployeeID { get; set; }

        [Key]
        public int EmployeeLanguageID { get; set; }
        public string LanguageName { get; set; }
        public string TalkingAbility { get; set; }
        public string ReadingAbility { get; set; }
        public string WritingAbility { get; set; }

    }

    public class RelayCommand : ICommand
    {
        private readonly Action _execute;
        private readonly Func<bool> _canExecute;

        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }

        public RelayCommand(Action execute, Func<bool> canExecute = null)
        {
            _execute = execute ?? throw new ArgumentNullException(nameof(execute));
            _canExecute = canExecute;
        }

        public bool CanExecute(object parameter)
        {
            return _canExecute == null || _canExecute();
        }

        public void Execute(object parameter)
        {
            _execute();
        }
    }

The result:

How can I create a Complex View Like this one in WPF DataGridView C#?

1 answer

Activity