How to hide rows in a DataGrid

[drei97]

Hi,

in my project I have to hide rows in a DataGrid according to some criteria.

My current approach is to keep the full set of data in a List<> and provide a filtered List<> as Source property for the DataGrid.

I am now wondering how to notify the DataGrid about changes in the Lists.

private List<MyClass> _list;
public List<MyClass> Source {get; set;};
...
private void Change()
{
    _list[123].IsVisible = false;
}
...
private void Refresh()
{
    Source = _list.Where(x=>x.IsVisible).ToList();
    // how to notify the DataGrid about the changes
}

I tried several approaches to update the view after refreshing the filtered list, nothing worked. RaisePropertyChanged will not work since it only is for changes of single properties of MyClass and to update the binded cell. The filter property is not shown in the DataGrid and should affect the whole row and not only a single cell.

My issue is about two questions:

1. How to efficiently hide a row in a DataGrid according to its content?
2. How to notify the DataGrid to update the view according to changes in 1)?

[gehongyan]

1. Hide a row in a DataGrid according to its content

The item data is carried within the DataGridRow, which provides an IsVisible property that can be bound through styles.

<DataGrid ItemsSource="{Binding YourItemsSource}">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding ColumnContent}" />
    </DataGrid.Columns>
    <DataGrid.Styles>
        <!-- Select all DataGridRow via Style -->
        <Style Selector="DataGridRow">
            <!-- Set the DataGridRow.IsVisible property to the value of the IsVisible property of the data item -->
            <Setter Property="IsVisible" Value="{Binding (ns:ItemDataType).IsVisible}" />
        </Style>
    </DataGrid.Styles>
</DataGrid>

---

2. How to notify the DataGrid to update the view according to changes?

• Native INotifyPropertyChanged

To notify the view (binding system) of property changes, the class containing the properties needs to implement the INotifyPropertyChanged interface, and the corresponding properties' setters should invoke the notification event. Template code for this is often generated conveniently via context menus in IDEs.

using System.ComponentModel;

public class ItemDataType : INotifyPropertyChanged
{
    private bool _isVisible;

    /// <remarks>
    ///     This property does not implement the INotifyPropertyChanged interface event invoking,
    ///     hence it will not be updated in the UI.
    /// </remarks>
    public required string ColumnContent { get; set; }

    /// <remarks>
    ///     This property implements the INotifyPropertyChanged interface event invoking,
    ///     hence it will be updated in the UI.
    /// </remarks>
    public required bool IsVisible
    {
        get => _isVisible;
        set => SetField(ref _isVisible, value);
    }

    /// <inheritdoc />
    public event PropertyChangedEventHandler? PropertyChanged;

    /// <summary>
    ///     Notify property changed.
    /// </summary>
    /// <param name="propertyName"> The property name. </param>
    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    /// <summary>
    ///     Set field value and notify property changed.
    /// </summary>
    /// <param name="field"> The field. </param>
    /// <param name="value"> The value. </param>
    /// <param name="propertyName"> The property name. </param>
    /// <typeparam name="T"> The field type. </typeparam>
    /// <returns> True if the field value is changed; otherwise, false. </returns>
    protected bool SetField<T>(ref T field, T value, [CallerMemberName] string? propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value)) return false;
        field = value;
        OnPropertyChanged(propertyName);
        return true;
    }
}

If you are using ReactiveUI or CommunityToolkit.Mvvm, codes above can often be significantly simplified.

• ReactiveUI

using ReactiveUI;
using ReactiveUI.Fody.Helpers;

public class ItemDataType : ReactiveObject
{
    [Reactive]
    public bool IsVisible { get; set; }
}

• CommunityToolkit.Mvvm

using CommunityToolkit.Mvvm.ComponentModel;

public partial class ItemDataType : ObservableObject
{
    [ObservableProperty]
    private bool _isVisible;
}

---

Additionally, if you need to notify the UI of changes to the members of the same collection object reference instead of replacing the object instance of a collection property, the collection needs to implement the INotifyCollectionChanged interface, for example, ObservableCollection or AvaloniaList. This differs from the INotifyPropertyChanged.

[drei97]

Thank you for your detailed reply.

It is working now.

[mrmorrandir]

When doing this with the Community Toolkit, I will get the following behaviour:

When the list is shown for the first time the items vanish as expected.

After refreshing the ObservableCollection - Items.Clear and Items.Add - the items won't vanish anymore on button click, although the IsVisible property is set correctly to false.

Has anyone an idea why this would happen?

[maxkatz6]

Removing item from the observable list should be the most reliable way to do it. I don't know if IsVisible solution works, but you can try it, if it suits you better.

[drei97]

I prefer the approach with a modified list, since I am reading my data from a database and have to rearrange them anyway.

[pjmagee]

I implemented something with

 <Style Selector="DataGridRow">
            <Setter
                Property="IsVisible"
                Value="{Binding IsVisible, DataType=vm:MyViewModel, Mode=OneWay}" />
        </Style>

This was working, however upon adding features, the DataGrid Source changes when a the concept of a 'Profile' is selected, essentially changing the ItemsSource. I have observed very bizarre behaviour since adding this new feature. The visibility is working fine if i do not change the source, the moment i change profiles from one to another, this style breaks essentially making all rows 'visible' when they should not be.

The visibility logic is calculated in-real based on a running application doing calculations each second, the list of data is small, but the style seemed like the most obvious choice to me, since the ones 'not visible' are ViewModelItems themself which are performing some calculations and the 'IsVisible' could become true.

Not sure what my options are now that this style seems to break when re-binding from different Observable Collections (each profile is its own list of the same ViewModel items).

I thought it would have been nice if DataGridRow could somehow have a class or 'visible' property set on it without needing style but now Im not sure what my best action is after finding this.. I think its a bug with avalonia styles, but not sure to be honest.