1

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

        }
THI
  • 355
  • 11
  • 40
  • 1
    as far as I know I achieved this via jquery during expand action. the problem is: everytime you change the tree table (expand/collapse a row) the tree table internally re-orders all rows... so I guess there won't be good and clean solution. maybe via CSS? – dotchuZ Aug 23 '18 at 07:15
  • Does this answer your question? [How to change the color of row in table (SAPUI5)?](https://stackoverflow.com/questions/22704644/how-to-change-the-color-of-row-in-table-sapui5) – Boghyon Hoffmann Sep 12 '22 at 12:28

0 Answers0