Avalonia.Controls.TreeDataGrid icon indicating copy to clipboard operation
Avalonia.Controls.TreeDataGrid copied to clipboard

Checkbox Column - cascade select

Open turowicz opened this issue 1 year ago • 7 comments

How can I make it so when I check a hierarchy node, then all subitems get also checked in a cascade way?

turowicz avatar Oct 19 '22 13:10 turowicz

cc @grokys @wieslawsoltes

turowicz avatar Oct 19 '22 13:10 turowicz

How can I make it so when I check a hierarchy node, then all subitems get also checked in a cascade way?

I imagine that you want something like this: https://github.com/zkSNACKs/WalletWasabi/pull/9089#pullrequestreview-1108449863

You will want a MultiSelector And a column like this: https://github.com/SuperJMN/WalletWasabi/blob/465980eb6b900e8ef050f2582ad872f0f9157b09/WalletWasabi.Fluent/ViewModels/CoinSelection/Core/ColumnFactory.cs#L103

If you need more help, ping me and I will see if I can prepare a sample for you.

SuperJMN avatar Oct 19 '22 16:10 SuperJMN

@SuperJMN a sample would be lovely.

I tried this but it doesn't trigger a draw. This mean that I need to scroll the list to see the visual changes.

    public class TreeItem : INotifyPropertyChanged
    {
        private bool _checked;

        public TreeItem()
        {
            Children.CollectionChanged += DataCollectionChanged;
        }

        public string Display { get; set; }

        public dynamic Object { get; set; }

        public bool Checked
        {
            get
            {
                return _checked;
            }
            set
            {
                _checked = value;

                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(nameof(Checked)));
                }
            }
        }

        public ObservableCollection<TreeItem> Children { get; set; } = new ObservableCollection<TreeItem>();

        public event PropertyChangedEventHandler? PropertyChanged;

        public override string ToString()
        {
            return Display;
        }

        private void DataCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
        {
            if (e.OldItems != null)
            {
                foreach (INotifyPropertyChanged item in e.OldItems)
                {
                    item.PropertyChanged -= ItemPropertyChanged;
                }
            }

            if (e.NewItems != null)
            {
                foreach (INotifyPropertyChanged item in e.NewItems)
                {
                    item.PropertyChanged += ItemPropertyChanged;
                }
            }
        }

        public static void ItemPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (sender is TreeItem item)
            {
                var isChecked = item.Checked;

                foreach(var child in item.Children)
                {
                    child.Checked = isChecked;

                    ItemPropertyChanged(child, null);
                }
            }
        }
    }

turowicz avatar Oct 19 '22 18:10 turowicz

I feel like this is a standard feature to be expected from a Tree control with checkboxes. It should have been implemented in https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid/pull/127

turowicz avatar Oct 20 '22 08:10 turowicz

@SuperJMN @grokys @wieslawsoltes anyone please help, I'm stuck on this:

Screencast from 2022-10-22 13-24-27.webm

turowicz avatar Oct 22 '22 11:10 turowicz

It only updates the drawing after the CheckboxColumn items fall below the fold

turowicz avatar Oct 22 '22 11:10 turowicz

Only this code can be used now

<TreeDataGrid.Resources>
                        <DataTemplate x:Key="FileNameCell1" DataType="m:FileTreeNodeModel">
                            <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" />
                        </DataTemplate>
Columns =
                {
                    new TemplateColumn<FileTreeNodeModel>(
                            "Name",
                            "FileNameCell1",
                            options: new ColumnOptions<FileTreeNodeModel>
                            {
                                CanUserResizeColumn = false
                            }),

GIF

Coloryr avatar Jan 16 '23 09:01 Coloryr