Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Question Binding problems with MultiColumnListView and ListView

Discussion in 'UI Toolkit' started by ErnestSurys, Oct 14, 2022.

  1. ErnestSurys

    ErnestSurys

    Joined:
    Jan 18, 2018
    Posts:
    94
    I followed an example from Unity Manual on how to bind a list to a listview. But here are my problems:

    • When I moved item creation from UXML to code binding to toggle element no longer works.
    • When I try to follow the same logic when binding property to MultiColumnListView it does not work at all.
    I would appreciate any help, especially with the cell binding for MultiColumnListView. I'm testing it in Unity 2022.2

    Code (CSharp):
    1. [CreateAssetMenu(menuName = "UIToolkitExamples/GameSwitchList")]
    2. public class GameSwitchListAsset : ScriptableObject
    3. {
    4.     public List<Person> people;
    5.  
    6.     public void Reset()
    7.     {
    8.         people = new()
    9.         {
    10.             new() { name = "P1", age = 1, graduated = true },
    11.             new() { name = "P2", age = 2, graduated = false },
    12.             new() { name = "P3", age = 3, graduated = true },
    13.         };
    14.     }
    15. }
    16.  
    17. [Serializable]
    18. public struct Person
    19. {
    20.     public string name;
    21.     public int age;
    22.     public bool graduated;
    23. }
    24.  
    25. [CustomEditor(typeof(GameSwitchListAsset))]
    26. public class GameSwitchListEditor : Editor
    27. {
    28.     public override VisualElement CreateInspectorGUI()
    29.     {
    30.         var root = new VisualElement();
    31.  
    32.         var list = CreateList();
    33.         root.Add(list);
    34.  
    35.         var multiColumnListView = CreateMultiColumnList();
    36.         root.Add(multiColumnListView);
    37.  
    38.         return root;
    39.     }
    40.  
    41.     private static ListView CreateList()
    42.     {
    43.         var listView = new ListView();
    44.         listView.showBorder = true;
    45.         listView.reorderable = true;
    46.         listView.showFoldoutHeader = true;
    47.         listView.headerTitle = "People";
    48.         listView.bindingPath = nameof(GameSwitchListAsset.people);
    49.         listView.makeItem = () =>
    50.         {
    51.             var container = new VisualElement();
    52.             container.style.flexDirection = FlexDirection.Row;
    53.             container.Add(new Toggle
    54.             {
    55.                 bindingPath = nameof(Person.graduated)
    56.             });
    57.             container.Add(new TextField
    58.             {
    59.                 bindingPath = nameof(Person.name)
    60.             });
    61.             container.Add(new IntegerField
    62.             {
    63.                 bindingPath = nameof(Person.age)
    64.             });
    65.             return container;
    66.         };
    67.         return listView;
    68.     }
    69.  
    70.     private  MultiColumnListView CreateMultiColumnList()
    71.     {
    72.         var multiColumnListView = new MultiColumnListView();
    73.         multiColumnListView.showBorder = true;
    74.         multiColumnListView.reorderable = true;
    75.         multiColumnListView.showFoldoutHeader = true;
    76.         multiColumnListView.headerTitle = "People";
    77.         multiColumnListView.bindingPath = nameof(GameSwitchListAsset.people);
    78.         multiColumnListView.columns.Add(new Column
    79.         {
    80.             title = "Enabled",
    81.             stretchable = true,
    82.             makeCell = () => new Toggle
    83.             {
    84.                 bindingPath = nameof(Person.graduated)
    85.             }
    86.         });
    87.         multiColumnListView.columns.Add(new Column
    88.         {
    89.             title = "Name",
    90.             stretchable = true,
    91.             makeCell = () => new Label
    92.             {
    93.                 bindingPath = nameof(Person.name)
    94.             }
    95.         });
    96.         return multiColumnListView;
    97.     }
    98. }
     
  2. griendeau_unity

    griendeau_unity

    Unity Technologies

    Joined:
    Aug 25, 2020
    Posts:
    247
    ListView
    will search for a single
    BindableElement
    in the binding phase and bind everything under it, so you'll need to change your container for a
    BindableElement
    in order for all the hierarchy to be bound.

    As for multi column controls, I'm afraid they don't support editor bindings out of the box unfortunately, because the wrapper container is not bindable. They probably shouldn't be BindableElements at the moment. I'll make a note with the team so that we look into this. Thanks for reporting !
    As a workaround, you can bind every cell individually with the relative property, during
    bindCell
    .