Question Unity UI Toolkit Runtime Treeview

Hi,

first off, thank you very much for helping me out in another Thread,LostDog-FoundCat .
I have some more questions and figured this would be best packaged in a new one.

Currently i managed to populate a TreeView for Runtime, so that it displays what i had in mind.


My questions are:

• 1. I use a plain c# object instead of an interface for TreeViewItemData<T0> , is this alright or will i run into some Performance issues or other Problems? I do this to have different classes in 1 Treeview without the need for them to share 1 Interface (so i can add custom elements, depending on the classe later on).
  Here is the bindItem code for this:

Code (CSharp):

1.         // Set TreeView.bindItem to bind an initialized node to a data item.
2.         treeV.bindItem = (VisualElement element, int index) =>
3.         {
4.             if (treeV.GetItemDataForIndex<object>(index) is sdGalaxy g)
5.             {
6.                 (element as Label).text = treeV.GetItemDataForIndex<sdGalaxy>(index).Name;
7.             }
8.             else if (treeV.GetItemDataForIndex<object>(index) is sdSector s)
9.             {
10.                 (element as Label).text = treeV.GetItemDataForIndex<sdSector>(index).Name;
11.             }
12.             // todo: add case for Cosmos HERE (this is why the screenshot has an unnamed element at top)
13.             else if (treeV.GetItemDataForIndex<object>(index) is string G)
14.             {
15.                 (element as Label).text = G;
16.             }
17.         };

• 2. I understand what the TreeViews item "Func<VisualElement>"'s do. But i couldnt find examples to when to use them or to ignore the.

2.1 makeItem => clear, the Visualizer/Virtualizer of the Tree detected that this item is need AND visible, use this to Generate the Container for this Item. This is needed for Container and Display.
2.2 bindItem => clear, the Visualizer/Virtualizer has detected some change that makes this Container visible AND/OR change Content. This is needed for Content Change and Display.
2.3 unbindItem => not clear. When should i supply this Func with code? My simple example seems to work just fine without it.
2.4 destroyItem => not clear. When should i supply this Func with code?​

• 3. It is my understanding that when i screew up with those 4 itemFuncs properly, i can crash the application ? Like stuff gets bound without proper unbinding while the user scrolls wildly around?
  
  
• 4. Feedback: The documentation should mention that 1 Treeview needs 1 unique key for each element in the Treeview, no matter the nesting levels. I hope i didnt miss this information somehow.

• 5. Feedback 2 I would suggest to Rename "bindItem" and "unbindItem" dearly to something else, like "supplyItem" and "unsupplyItem". If Data Bindings are to come, this is begging for Problems and Support help requests, it also makes searching a bit harder.

 

bump

 

Thank you very much for this detailed Information.
For 3. i had in mind just the case you described in 3/2, where i would subscribe but not unsubscribe during scrolling.
And with egnouth scrolling while subscribing to anything, i thought i would reach a cap.
But Since you mentioned not only "unsubscribed" case but also recusrion, i think this covers it.

So unless i understand it wrong, your awnser 3 tells me i could, but shouldnt, ignore unsubscribing in "unbind Item" ?

 

Another problem showed up. The TreeView has indent levels, but i can not find a proper to way to manipulate them.
When i use uss, it gets ignored ( based on this Info ) as it should because it say "inline" in the debugger.


While this is an ok width for the Editor TreeV (Above), its too much for Runtime TreeV (Below)



I figured a way to achive what i want, by drilling throu the VisualElements to reach the Indent Element.


Like this:

Code (CSharp):

1. // Set TreeView.bindItem to bind an initialized node to a data item.
2.         treeV.bindItem = (VisualElement element, int index) =>
3.         {
4.             if (element is PlanetaryTreeElementRepresenter plListEntry)
5.             {
6.                 if (treeV.GetItemDataForIndex<object>(index) is sdCosmos cos)
7.                 {
8.                     plListEntry.sLabel.text = cos.Name;
9.                     plListEntry.sToggle.visible = false;
10.                     plListEntry.sImageVisualElement.style.backgroundImage = icon_cosmos;
11.                     var childs = plListEntry.parent.Children();
12.                     foreach (var item in childs)
13.                     {
14.                         item.style.width = 10;
15.                         break;
16.                     }
17.                 }
18.                 else if (treeV.GetItemDataForIndex<object>(index) is sdGalaxy g)
19.                 {
20.                     plListEntry.sLabel.text = g.Name;
21.                     plListEntry.sToggle.visible = false;
22.                     plListEntry.sImageVisualElement.style.backgroundImage = icon_galaxy;
23.                     var childs = plListEntry.parent.parent.Children();
24.                     foreach (var item in childs)  // HERE DRILLING //
25.                     {
26.                         item.style.width = 10;
27.                         break;
28.                     }
29.                 }
30.                 else if (treeV.GetItemDataForIndex<object>(index) is sdSector s)
31.                 {
32.                     plListEntry.sLabel.text = s.Name;
33.                     plListEntry.sToggle.visible = true;
34.                     plListEntry.sImageVisualElement.style.backgroundImage = icon_sector;
35.                 }
36.                 else if (treeV.GetItemDataForIndex<object>(index) is string G)
37.                 {
38.                     element.Q<Label>().text = G;
39.                 }
40.             }
41.             else
42.             {
43.                 Label l = element.Q<Label>();
44.                 if (l != null)
45.                 {
46.                     l.text = "ERROR:Element is not PlanetaryListEntryController";
47.                 }
48.             }
49.         };
50.  

But that cant be right?
In short: How to change indent level in general and how to change it per element?

 

Thank you for your time.
I never reported a bug before, so i did it like this https://unity3d.atlassian.net/servicedesk/customer/portal/2/IN-46446
Is this right?
-----

As you said the values are being reset, no matter what i tried.

I just tried it and it works. I forgot the margin in the Bug Report tho.

Code (CSharp):

1. #unity-tree-view__item-toggle > VisualElement > VisualElement {
2.     margin-left:0px;
3.     width: 0px;
4.     margin-right:0px;
5. }

This would be amazing, and there seems to be a bug that multiplies the values during runtime by 4.