allowDragging in flexgrid with custom ng-template for column

allowDragging in flexgrid with custom ng-template for column

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

• 

  anthcasey

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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>
  	</ng-template>
  </wj-flex-grid-column>
  
  

  The row isn’t draggable in the parent. Can you advise how I can best achieve this?

• 

  anthcasey

  • Post Options:
  • Link
    Copy

  Posted 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 (https://stackblitz.com/edit/angular-efauth) provided in this discussion: https://www.grapecity.com/forums/wijmo/how-to-implement-expand-an, 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?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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:

  https://stackblitz.com/edit/angular-6mjihg

  Regards,
  
  Ashwin