I am trying to show the expanded rows of a tree table in different color. Is there any way to do it. Currently, my table has alternate row colors - grey and white. Now when I am expanding the tree table node, the children also follow the same color pattern. I want to highlight background color for children to blue or some other color. But, I understand that as row data is rendered dynamically it is not possible to know in advance which rows are child rows and to make them blue. Any ideas?
View.xml
<table:TreeTable id="List"
rows="{path:'List>/', parameters: {arrayNames:['childNodes']}}" selectionMode="None" rowHeight="46px" visibleRowCount="10" toggleOpenState="rowExpanded" enableSelectAll="false" >
<table:columns>
<table:Column filterProperty="Code">
<Label text="ListColNumber"/>
<table:template>
<Text text="{List>Part}" wrapping="false"/>
</table:template>
</table:Column>
<table:Column filterProperty="Name">
<Label text="ListColName"/>
<table:template>
<HBox class="sapUiMediumMarginEnd" justifyContent="SpaceBetween">
<Text text="{path:'List>PartName'}"/>
<Text width="200px" visible="{= ${List>node} === 'Child'}" text="Lot:{path:'List>Lot'}"/>
</HBox>
</table:template>
</table:Column>
Controller.js
// I am trying to get the index of the row that is expanded, then count the child rows and then assign background color the child rows. I am making some mistakes.
var rowPath = event.getParameters().rowContext.getPath();
var index = event.getParameters().rowIndex;
var a = this.getView().getModel("inventoryList").getProperty("/1/childNodes");
// In InventoryList model there are about 19 array rows being
returned. I wanted to access the exact row that is being expanded
using the rowPath and then traverse to the childNodes property of
that row. ChildNodes is also an array and will tell me how many
children are there. I did not know how to do that exactly so gave
/1/childnode to test
var b = this.getView().byId("inventoryList");
for (var i = 1; i < a.length; i++)
{
var childRow = b.getRows()[i + 1];
childRow.addStyleClass("red"); // this gives error
}