CODEWITHSUNDEEP
sapui5
Pille
Pille

Reputation: 1133

How to integrate Icon in each row of a grid table?

I would like to have a delete icon in a label of a column of sap.ui.table.TreeTable, to prevent an extra column for such.

here

I would like to put the icon right of the description, associated with an onPress Event to delete this row.

I tried to put the icon within the <t:template> aggregation. Would this be possible? Corresponding part of code of XML-view is as follows:

<t:TreeTable id="tree">
    <t:columns>
        <t:Column>
            <t:label>
                <Label text="{i18n>TREE_NAME_LABEL}"/>
            </t:label>
            <t:template>
                <Label text="{TREE_DESCRIPTION}" />
            </t:template>
        </t:Column>
    </t:columns>
</t:TreeTable>

Upvotes: 2

Views: 3563

Answers (1)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18044

As of 1.45, we can assign actions for each row declaratively via the table's aggregation rowActionTemplate. Currently, the following action types are available:

  • "Delete"
  • "Navigation"
  • "Custom" with e.g. a custom icon and a custom text in the assigned RowActionItem.

In your case, it would be something like this:

<table:TreeTable xmlns:table="sap.ui.table" id="tree" rowActionCount="1">
  <table:columns>
    <!-- ... -->
  </table:columns>
  <table:rowActionTemplate>
    <table:RowAction>
      <table:RowActionItem
        type="Delelte"
        press=".onDelete"
      />
    </table:RowAction>
  </table:rowActionTemplate>
</table:TreeTable>

SAPUI5 sap.ui.table.Table RowAction Delete

Note

  • Ensure to set the table's property rowActionCount which is required to render a certain number of actions initially without the user having to click on a … button.

    Name Default value Description
    rowActionCount 0 Number of row actions made visible which determines the width of the row action column. The values 0, 1 and 2 are possible.

  • The row action template needs to be reassigned every time its property or aggregation has changed.

    Name Cardinality Type Description
    rowActionTemplate 0..1 sap.ui.table.RowAction [...] Each time the template's properties or aggregations are changed, the template has to be applied again via setRowActionTemplate [...].

Upvotes: 2

Related Questions