MultiColumnListView Row & Text Styling

I need to build a UI that is like a scrollable table, where depending on the data provided, the row color and text color will change (per row). I want to use the UI toolkit because of the virtual list support in list view. It seems smoother than some asset store options I have tried for the old UI system.

I plan on using the 2022.1 beta because it has the MultiColumnListView.
From what I can tell, the best way to accomplish this is using the makeItem and bindItem callback. However, that callback is marked as obsolete and it says to use the one on “ListView”. But this class does not inherit from that. Are there any solutions to my goal? Or anything someone would recommend to try?

My plan was to use that call back to… add a styling class perhaps? And then predefine some styles? Still working that one out.

My example is based on the other main post related to MultiColumnListView. But below is a short example of it. For the UXML, I just added a few columns and set their cell binding path. For the C#, I just set the item source to a list of data.

<ui:VisualElement style="flex-grow: 1; top: auto;">
<ui:MultiColumnListView focusable="true" name="AlarmViewer" show-alternating-row-backgrounds="None" show-border="false" style="top: auto;">
<ui:Columns>
<ui:Column id="createdOn" title="Created On" stretchable="true" cell-binding-path="createdOn" />
<ui:Column id="clearedOn" title="Cleared On" stretchable="true" cell-binding-path="clearedOn" />
<ui:Column id="assetName" title="Asset" stretchable="true" cell-binding-path="assetName" />
<ui:Column id="alarmName" title="Alarm" stretchable="true" cell-binding-path="alarmName" />
</ui:Columns>
</ui:MultiColumnListView>
</ui:VisualElement>
private MultiColumnListView alarmViewer;

void SomeMethod() {
alarmViewer = root.Q<MultiColumnListView>("AlarmViewer");
alarmViewer.itemsSource = MyListOfData;
alarmViewer.makeItem = () => ...
alarmViewer.bindItem = (e, i) => ...

For those that run across this post, I was able to accomplish my goal by looping through the columns and setting it that way.

alarmVewer.columns.ElementAt(0).bindCell = ....
1 Like

Exactly, ListView’s makeItem/bindItem are replaced by makeCell/bindCell in MultiColumnListView.
You can access columns by index or by name.
multiColumnList.columns[0].makeCell = ... or multiColumnList.columns["column-1-name"].bindCell = ...

2 Likes