showing row details on button click of silver light datagrid
In this article, we will see how to use Silverlight DataGrid RowDetails Template.
First let us drag and drop a data grid control on MainPage.xaml page. This will add the required references and namespace automatically.
Data grid will look like
<data:DataGrid Margin="50,50,0,0" x:Name="dg" CanUserSortColumns="True" AutoGenerateColumns="False" HeadersVisibility="All" RowBackground="LightBlue"
AlternatingRowBackground="AliceBlue" Height="300" Width="600" RowHeight="30" IsReadOnly="True" CanUserResizeColumns="False">
Most important property of data grid in this case would be RowDetailsVisibilityMode
This option will let us toggle the view of row details
Next I will add RowDetailsTemplate data template to let us display the content we want to show when the user selects the row. In this case, I have shown each property of the cricketer in a new row.
<data:DataGrid.RowDetailsTemplate>
<!-- Begin row details section. -->
<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1" Background="White">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.15*" />
<ColumnDefinition Width="0.85*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- Controls are bound to FullAddress properties. -->
<TextBlock Text="FirstName "
Grid.Column="0" Grid.Row="0" />
<TextBlock Text="Binding FirstName"
Grid.Column="1" Grid.Row="0" />
<TextBlock Text="LastName "
Grid.Column="0" Grid.Row="1" />
<TextBlock Text="Binding LastName"
Grid.Column="1" Grid.Row="1" />
<TextBlock Text="Age "
Grid.Column="0" Grid.Row="2" />
<TextBlock Text="Binding Age"
Grid.Column="1" Grid.Row="2" />
<TextBlock Text="Joining Date "
Grid.Column="0" Grid.Row="3" />
<TextBlock Text="Binding DOJ"
Grid.Column="1" Grid.Row="3" />
</Grid>
</Border>
</DataTemplate>