CODEWITHSUNDEEP
wpfwpf-controlswpfdatagrid
Sharad
Sharad

Reputation: 435

WPF Nested Data Grid with fixed header and sub header

I want to create a WPF nested data grid which will have a fixed header and sub header. Below are some points which are required to create the nested grid control:-

  1. The Main grid rows will have data aligned to the Main header columns and the nested grid rows will have data aligned to the sub-header columns.
  2. On click of Main grid row, the nested grid rows should get displayed with data corresponding to sub header columns.
  3. User must be able to expand multiple Main grid rows.

Below is an image which depicts the grid which we require.

enter image description here

As shown in the above grid, the grey rows are the main rows aligned to the Main header and the two white rows are the sub rows aligned to the Sub header(operacao, autent., hora etc.)

The collection(Main grid) which has to be bound to this control has another collection as property which contains the rows of the Sub rows(Nested grid).

Upvotes: 0

Views: 788

Answers (1)

Sumit Saini
Sumit Saini

Reputation: 33

This functionality can be achieved by using following hierarchy:

  1. In order to create such a control you will have to create labels separate from the grid with the expected design and align their width to the collection properties which are meant to be grid columns.
  2. Create a Custom control inherited by a Data-grid and handle the Mouse and Key events in it for the Data-grid.
  3. Use this custom control in the Main XAML file with Data Source equal to the Main Collection(List) and bind the columns of the grid to the properties of the data source.
  4. Use a Data-Template inside the Data-grid with a RowDetailsTemplate which will further contain the custom control(Data-grid).
  5. Bind the inner collection present in the Main collection to this inner custom control. This is how nesting can be achieved by using Data-grid components.
  6. For the expand and collapse functionality override the Mouse Down/Mouse Up event of the custom control and handle the Row Details visibility of the control. This is how you can control the expansion and collapse of the grid rows.

You can also override the click events and handle the further navigation. Also, in order to achieve the same design do some adjustments in the grid columns. You can achieve this behavior by the mentioned approach.

Upvotes: 1

Related Questions