TreeView issue in v7.0.0-preview4 with multi selection about mudblazor

[henon]

@sardar97 I'll fix your issue but I need your help. To be honest, from your video I don't understand what is going on at all. Can you create a minimal example code that reproduces your problem without all your application complexity? I can use that as a test case for creating a fix.

Since TryMB is still on v6.x.x you could checkout our dev branch and add a simple example to our treeview docs that exhibits the behavior you reported. Then either PR that example and tag me or post the example code here in this issue

[sardar97]

Do you concur?

Yes.

Do we want to add it in v7 or v8?

Imo v7 would be better

[henon]

I plan to PR it this weekend.

[sardar97]

@sardar97 I'll fix your issue but I need your help. To be honest, from your video I don't understand what is going on at all. Can you create a minimal example code that reproduces your problem without all your application complexity? I can use that as a test case for creating a fix.

Since TryMB is still on v6.x.x you could checkout our dev branch and add a simple example to our treeview docs that exhibits the behavior you reported. Then either PR that example and tag me or post the example code here in this issue

see it here
I just used one of the examples in dev.mudblazor.com treeview docs

[henon]

I understand your problem now. Your MudTreeView has T="TreeItemData". When you set SelectedValues to some other objects of TreeItemData the treeview will find that it doesn't have matching values in its tree and thus nothing happens. You need to either set a comparer or implement GetHashCode() and Equals() on your TreeItemData class.

[henon]

@ScarletKuro The problem we have here is related to our discussion a while ago. Treeview has a parameter

        [Parameter]
        [Category(CategoryTypes.TreeView.Data)]
        public IReadOnlyCollection<T>? Items { get; set; } = Array.Empty<T>();

Which are then rendered in the treeview razor using the item template:

            @foreach (var item in Items)
            {
                @ItemTemplate(item)
            }

The problem here is that the Items parameter now forces the treeview to become T="TreeViewData" instead of for instance T="string" which would be better suited for SelectedValues.

I think we should provide a standard TreeItemData<T> class which our users can inherit from and change Items from type T to TreeItemData<T>.

Do you concur?

[sardar97]

@ScarletKuro The problem we have here is related to our discussion a while ago. Treeview has a parameter

        [Parameter]
        [Category(CategoryTypes.TreeView.Data)]
        public IReadOnlyCollection<T>? Items { get; set; } = Array.Empty<T>();

Which are then rendered in the treeview razor using the item template:

            @foreach (var item in Items)
            {
                @ItemTemplate(item)
            }

The problem here is that the Items parameter now forces the treeview to become T="TreeViewData" instead of for instance T="string" which would be better suited for SelectedValues.

I think we should provide a standard TreeItemData<T> class which our users can inherit from and change Items from type T to TreeItemData<T>.

Do you concur?

yes I am, that really make sense.

[sardar97]

I understand your problem now. Your MudTreeView has T="TreeItemData". When you set SelectedValues to some other objects of TreeItemData the treeview will find that it doesn't have matching values in its tree and thus nothing happens. You need to either set a comparer or implement GetHashCode() and Equals() on your TreeItemData class.

I tried this with my own codes it make sense for the parent only not for the child!

 public class TreeItemData
    {
        public string Title { get; set; }
        public string ParentName { get; set; }
        public bool IsParent { get; set; }
        public bool Expanded { get; set; }
        public HashSet<TreeItemData> ChildItems { get; set; }
    
        public TreeItemData(string title,string parentName,bool isParent)
        {
            Title = title; 
            ParentName = parentName;
            IsParent = isParent; 
        }
        
        public override bool Equals(object? obj)
        {
            return obj is TreeItemData data &&
                   Title == data.Title &&
                   ParentName == data.ParentName &&
                   IsParent == data.IsParent;
        }

        public override int GetHashCode()
        {
            return HashCode.Combine(Title, ParentName, IsParent);
        }
    }

[henon]

I think it would work if you just used the Title for comparison.

        public override bool Equals(object? obj)
        {
            return obj is TreeItemData data &&
                   Title == data.Title;
        }

        public override int GetHashCode()
        {
            return Title.GetHashCode();
        }

Edit: or if they are not unique you'll need some kind of unique ID

[sardar97]

I think it would work if you just used the Title for comparison.

        public override bool Equals(object? obj)
        {
            return obj is TreeItemData data &&
                   Title == data.Title;
        }

        public override int GetHashCode()
        {
            return Title.GetHashCode();
        }

Edit: or if they are not unique you'll need some kind of unique ID

Actually I don't have unique ID in my case and let me explain it.

I have this table which is from asp net core Identity and I want to get only claim value

and then separate claim values by "." like Kitchen is parent and creat,read,update,delete . however in this case the parent is kind of unique because it will never repeat for each role.
well again it is what I want to do is that I want group by parent and show creat,read,update,delete for child.
I hope this would be clear for you 😅

[henon]

The claim value looks like a suitably unique ID

[sardar97]

The claim value looks like a suitably unique ID

yeah but the problem is that I have to separate them for better user friendly ui and I don't really know how to handle it :(

[henon]

It is easy. Add public string ID { get; set; } to class TreeItemData and save the claim value in the ID. Then use it for Equals and GetHashCode()

[sardar97]

@henon look at this shadow issue as well.

Screen.Recording.2024-06-06.at.3.04.33.PM.mov

[henon]

Browser rendering issue? I don't see how this could be a treeview bug.

[sardar97]

yeah it is only in Safari has this issue.

[ScarletKuro]

Do you concur?

Yes.
Do we want to add it in v7 or v8?