Search code examples
vmware-clarity

My question is about datagrid expandable row

How can I listen to the event when user clicks on row caret to either expand/close the row detail area?

Solution

  • You can use de-sugard syntax for the *clrIfExpanded directive like so:

      <clr-datagrid>
    <clr-dg-column>Col1</clr-dg-column>
    <clr-dg-column>Col2</clr-dg-column>

    <clr-dg-row *clrDgItems="let item of [1,2,3,4,5]">
      <clr-dg-cell>Item {{item}}</clr-dg-cell>
      <clr-dg-cell>Item * Item ({{item*item}})</clr-dg-cell>
      <clr-dg-row-detail clrIfExpanded (clrIfExpandedChange)="rowChange($event)">
        details
      </clr-dg-row-detail>
    </clr-dg-row>
  </clr-datagrid>

    Here is a working stackblitz that logs the change each time the row is opened or closed: https://stackblitz.com/edit/so-55617551-click-handler-for-datagrid-row-details