Dyamnic Detailed view of selected rows in DataGrid

Question

I need to create a detailed view when a row in my DataGrid Selected.

How should i get the headers of the datagrid and assign it to my detail view grid Label. and the Textblock near to label should contail the value of the header in the selected row.

Headers in my datagrid is not static. It might change in runtime. I have binded the itemsource of my datagrid with Ienumerable collection.

Thanks in advance if u could address my problem.

Update:

  <my:DataGrid 
                              Grid.Row="0"
                              x:Name="dataGrid1" 
                              Width="auto" 
                              AutoGenerateColumns="True" CanUserAddRows="True"             Margin="0,0,0,0"
                              MouseRightButtonUp="dataGrid1_MouseRightButtonUp" />

In my code behind am binding Ienumerable collection.

    this.dataGrid1.ItemsSource = objref.Result;
//Where objref.Result is Ienumerable collection

Then in my detailed view in XAML,

                           <Label>Date:</Label>
                            <TextBlockName="data"
                       Text="{Binding SelectedItem.date,  ElementName=dataGrid1}" />
                            <Label>Username:</Label>
                            <TextBlock Name="username" 
                       Text="{Binding SelectedItem.username, ElementName=dataGrid1}"
                      />

Just hardcoding the column headers. It may change. How can i handle this.??

@JoanComasFdz : I have updated my question. Thanks for ur interest — BinaryMee

JoanComasFdz JoanComasFdz · Accepted Answer · 2013-01-22T13:14:19

Listing every field generating the correct header is already done by the grid. Detailed view is often used to show images or other stuff that won't fit into one row.

Anyway I will assume you don't know the type of the result from objref. Therefore you will need to use reflection to:

Create an object representing the property name and the property value.
Get the public properties when selecteditem changes.
Transform this public properties list into a list of your new class
Use your datatemplate to present this as a detailed view.

The class representing the information you want to show:

public class PropertyInformation
{
    public string Name { get; set; }

    public object Value { get; set; }
}

A converter to get the properties list:

public class PropertiesLister :IValueConverter
{
    private const BindingFlags Flags = BindingFlags.Instance | BindingFlags.Public;

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value.GetType()
            .GetProperties(Flags)
            .Select(pi => new PropertyInformation
            {
                Name = pi.Name,
                Value = pi.GetValue(value, null)
            });
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

A template for the property information and the converter in XAML:

<Window.Resources>
    <DataTemplate x:Key="UserDataTemplate">
        <StackPanel Orientation="Horizontal">
            <Label Content="{Binding Name}"/>
            <Label Content="{Binding Value}" />
        </StackPanel>
    </DataTemplate>

    <Test_DataGridDetailedView:PropertiesListerConverter x:Key="toListConverter" />

</Window.Resources>

The detailed view using the converter:

<DataGrid ItemsSource="{Binding Customers}"
          AutoGenerateColumns="True">
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <ItemsControl
                x:Name="UserList"
                ItemTemplate="{StaticResource UserDataTemplate}"
                ItemsSource="{Binding Converter={StaticResource toListConverter}}"
                />
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

Dyamnic Detailed view of selected rows in DataGrid

1 Answers