allowDragging in flexgrid with custom ng-template for column

Posted by: anthcasey on 28 April 2021, 10:17 pm EST

  • Posted 28 April 2021, 10:17 pm EST

    I have a flexgrid (parent) where every row can be expanded, containing another nested grid (nested).

    Drag and drop reordering works fine in the nested grid by using [allowDragging]="'Rows'". However, the same does not work for the parent grid.

    In the parent grid, I have a custom expand/collapse button implementation due to row height issues when trying to use it out of the box:

    <wj-flex-grid-column [allowDragging]="'Rows'" [width]="30" align="center" cssClass="detail-icon" [isReadOnly]="true">
    <ng-template wjFlexGridCellTemplate let-cell="cell" cellType="Cell">
    <span (click)="dp.hideDetail(cell.row)" *ngIf="dp.isDetailVisible(cell.row)"><i class="fa fa-minus"></i></span>
    <span (click)="showDetails(dp, cell.row)" *ngIf="!dp.isDetailVisible(cell.row)"><i class="fa fa-plus"></i></span>

    The row isn't draggable in the parent. Can you advise how I can best achieve this?
  • Replied 28 April 2021, 10:29 pm EST

    I'm unable to edit the original post for an update:

    Furthermore, I noticed that in the stackblitz sample ( provided in this discussion:, when you add [allowDragging]="'Rows'" to each of the flexgrids, it only works in the nested one without the custom expand/collapse column.

    How can we get it working for the parent grid in this scenario?
  • Replied 29 April 2021, 8:39 pm EST

    Hi anthcasey,

    In the forum link provided, the row headers are not displayed and the dragging is only performed by row headers. I have updated the sample so that rows of both the grids can be dragged:

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels