Row detail template

Live demo

Node name : row-detail-template

This node can be used to enable row detail and define the template of it.

To access the item relative to the row detail, you can use the @Item binding.

Once the row detail template is defined, a new column will be added at the beginning of the row to open the detail.

Row details are hidden by default. Additionally, only one row detail is visible at a time.

If you want to open multiple details simultaneously, add the row-detail-visibility-mode attribute with the value multiple to the datagrid component.

If you want all row details to be expanded by default, add the row-detail-expanded-by-default attribute with the value true to the datagrid component.

The height of the row detail is determined by its content.

Examples

Simple example

<datagrid>
  <row-detail-template>
    <text>@Item.FullDescription</text>
  </column-template>
</datagrid>

Nested datagrid

<datagrid layout:height="fill">
  <row-detail-template>
    <context relation-property-name="Lines">
      <datagrid source="@Item.Lines" />
    </context>
  </row-detail-template>
</datagrid>

If no details are displayed by default (default behavior), ensure that the collection is not embedded: The data will be loaded when the detail is displayed.

If all details are expanded by default (row-detail-visibility-mode set to multiple and row-detail-expanded-by-default set to true), the collection must be embedded, otherwise there will be an API request per master row to load each collection. In this case, you will need to ignore the performance warning on the entity view.

Warning

It is not possible to embed a sub-view in the row detail.