Click button to bring up RowDetails

[Trump]

I have a GridView which has several columns. I want to click any row to bring up the row details. I don't want to use  <telerik:GridViewToggleRowDetailsColumn/>.

The reason is that it is put in the first column. What I want is to click any place in the row will show the row details. Click the row again will collapse the details. My plan is to put button in every column. So the common code in every column is 

<ItemContainerTemplate>
                                <Button Command="{Binding OpenDetailsCommand}" /                </ItemContainerTemplate>

The entire code of the RadGridView is:

<telerik:RadGridView Grid.Row="0"
                Name="clubsGrid"
                ItemsSource="{Binding Clubs, Source={StaticResource MyViewModel}}"
                AutoGenerateColumns="False"
                RowDetailsTemplate="{StaticResource RowDetailsTemplate}"
                Margin="5">
        <telerik:RadGridView.Columns>

            <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}">
                  <telerik:GridViewDataColumn.CellTemplate>
                          <ItemContainerTemplate>
                                <Button Command="{Binding OpenDetailsCommand}" />
                          </ItemContainerTemplate>
                  </telerik:GridViewDataColumn.CellTemplate>
            </telerik:GridViewDataColumn>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}"
                            Header="Est."
                            DataFormatString="{}{0:yyyy}">
                    <telerik:GridViewDataColumn.CellTemplate>
                          <ItemContainerTemplate>
                                <Button Command="{Binding OpenDetailsCommand}" />
                          </ItemContainerTemplate>
                  </telerik:GridViewDataColumn.CellTemplate>
            </telerik:GridViewDataColumn>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}"
                            Header="Stadium"
                            DataFormatString="{}{0:N0}">
                    <telerik:GridViewDataColumn.CellTemplate>
                          <ItemContainerTemplate>
                                <Button Command="{Binding OpenDetailsCommand}" />
                          </ItemContainerTemplate>
                  </telerik:GridViewDataColumn.CellTemplate>
            </telerik:GridViewDataColumn>
        </telerik:RadGridView.Columns>
    </telerik:RadGridView>
</Grid>

The button command is

public ICommand  OpenDetailsCommand = new DelegrateCommand<object>(OpenDetailsStackPanel);

private void OpenDetailsStackPanel(object parameter)
{

}

The question is the code doesn't reach the method. So what is wrong?

 

 

[Dilyan Traykov]

Hello Trump,

If you wish the DelegateCommand you've defined to be accessible through XAML, it needs to be a public property, rather than a field:

public ICommand OpenDetailsCommand { get; set; } = new DelegateCommand(OpenDetailsStackPanel);

In addition, unless the command is defined in your business objects (the Club class in this case), you will need to specify a source for the bindings:

<Button Command="{Binding DataContext.OpenDetailsCommand, RelativeSource={RelativeSource AncestorType=telerik:RadGridView}}" />

Or if you prefer:

<Button Command="{Binding OpenDetailsCommand, Source={StaticResource MyViewModel}}" />

To achieve the desired result, however, you will need to pass the parent row as a CommandParameter of the command.

<Button Command="{Binding OpenDetailsCommand, Source={StaticResource MyViewModel}}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=telerik:GridViewRow}}" />

The details' visibility can then be toggled like so:

private static void OpenDetailsStackPanel(object parameter)
{
    var row = parameter as GridViewRow;
    row.DetailsVisibility = row.DetailsVisibility == System.Windows.Visibility.Visible ? System.Windows.Visibility.Collapsed : System.Windows.Visibility.Visible;
}

For your convenience, I'm attaching a small sample project with the implementation.

Please let me know whether such an approach would work for you.

Regards,
Dilyan Traykov
Progress Telerik