0

I am trying to create a Datagrid where the first column contains '+' sign and next columns contain the data. When the user clicks the '+' sign the data is taken from the current row and the corresponding hierarchial data from different table is displayed in the new grid just below the current row. I tried searching online but could not find any example.

Please suggest me how to check this.

Lets say the grid contains

  • col1 Col2.... Col50
  • col1 Col2.... Col50

When the user clicks the '+' sign.

it should read col1, Col2, Col3,Col4

Then make a db call and get the data based on the above values.

the resulting grid should be

  • col1 col2.... Col50 NestedCol1 NestedCol2... NestedCol20 NestedCol1 NestedCol2... NestedCol20 . . . . .
  • col1 col2... Col50

Thanks, Naveen

Naveen Chakravarthy
  • 819
  • 2
  • 15
  • 30

1 Answers1

1

Looks like you'll have to define a new RowDetailsTemplate in the DataGrid. In the Resources define a new DataTemplate that has a grid in it with two rows:

  • The first row will be the regular data :col1, col2,... plus the button that controls the second row (the '+' button)
  • The second row will have a new control in it that best suits your needs (ItemsControl, ListBox, DataGrid,...)

The '+" button would control the visibility of the second row and the loading of the data for the appropriate row.

I hope this will get you started in the right direction.

Edit:

The hierarchical data will have to be part of the data in the first row by placing into a collection of some sort.

public class Foo{
object Col1 {get;set;}
object Col2 {get;set;}

object Col50 {get;set;}
NestedFoo[] NestedData {get;set;}}

public class NestedFoo{
object NestedCol1 {get;set;}
object NestedCol2 {get;set;}

object NestedCol50 {get;set;}}

This way you can set the ItemsSource for the control in the second row to the collection.

Danexxtone
  • 773
  • 4
  • 11