Show parent / child rows in same datagrid

Question

looking for some guidance on how best to approach this problem.

I've got a requirement to create a data grid that shows some parent rows and on each parent row we have a expand / collapse button. When clicked this button will cause some related child rows to be displayed under the parent row.

I've implemented this by using a rowdetailstemplate on the parent data grid that when expanded shows another datagrid that then displays the related child rows. This earlier question Displaying hierarchal parent child data in WPF DataGrid shows the details..

This works ok but has the problem that each parent row effectively has a seperate datagrid for the children, so things like navigating with the keyboard don't work too well, as the child rowdetails area is skipped over, the only thing we navigate is the parent.

Other problems are when we select child rows with the mouse we end up with several rows that are highlighted as selected. This is understandable as each grid is a seperate control.

The aim is to treat the child rows the same as the parent rows, in terms of selecting , navigating etc.

Does anybody have any pointers or guidance as to how to solve this problem?

Thanks

Answer 1

WPF DataGrid cannot be used for hierarchical tree view style representation that easily. There is a TreeListView control but it isnt as sophisticated WPF datagrid in terms of virtualization, editing, cell \ row selection etc. But given that your data grid will be readonly and your selection is row-wise you can apply styles to this control to make it look like its a WPF data grid.