Expand and Collapse All Row Details in RadGridView
Environment
| Product Version | 2022.2.621 |
| Product | RadGridView for WPF |
Description
How to implement custom logic that expands or collapses all row details in GridView.
Solution
The row details visibility of the GridView rows is controlled via their DetailsVisibility property. To implement logic that expands/collapses all row details, the DetailsVisibility property of the GridViewRow element can be bound to a property in the row's data item. Then, on button click or another action, the data item property of all items can be changed accordingly to the needed expand state.
Defining the data item's property
public class RowInfo : ViewModelBase
{
private Visibility detailsVisibility = Visibility.Collapsed;
public Visibility DetailsVisibility
{
get { return detailsVisibility; }
set { detailsVisibility = value; OnPropertyChanged("DetailsVisibility"); }
}
// other row related properties here
}
Data bind the visibility property
<telerik:RadGridView.RowStyle>
<!-- if using the NoXaml Telerik dlls, set the following setting on the Style object: BasedOn="{StaticResource GridViewRowStyle}"-->
<Style TargetType="telerik:GridViewRow">
<Setter Property="DetailsVisibility" Value="{Binding DetailsVisibility, Mode=TwoWay}"/>
</Style>
</telerik:RadGridView.RowStyle>
Expand/Collapse all row details
private void ToggleRowDetailsVisibility(Visibility visibility)
{
// this.source is a collection of RowInfo objects assigned to the ItemsSource of RadGridView
foreach (var item in this.source)
{
item.DetailsVisibility = visibility;
}
}