How to make a row conditionally draggable in aAG Grid (ag-grid)?

Question

Using AG Grid with Angular and wondering how to make a row conditionally draggable. For example if we want to make only the selected grid rows draggable, how that should get implemented.

The StackBlitz sample is here.

Please advise.

Answer 1

As per documentation: https://www.ag-grid.com/javascript-grid/row-dragging/#enabling-row-dragging

The rowDragcallback function has the following interface:

// function to enable/disable RowDrag function rowDragFunction(params: RowDragCallbackParams) => boolean;

// interface for params interface RowDragCallbackParams { node: RowNode; data: any; column: Column; colDef: ColDef; context: any; api: GridApi; columnApi: ColumnApi; }

So you should supply a callback to rowDrag. To find out if a row has been selected you can call node.isSelected():

rowDrag: params => params.node.isSelected(),

When a row is selected you need to refresh the rowDrag callback by calling api.redrawRows on the selectionChanged Event:

  onSelectionChanged(event) {
    this.gridApi.redrawRows();
  }

See this implemented here: https://stackblitz.com/edit/ag-grid-angular-hello-world-cmda8j?file=src%2Fapp%2Fapp.component.ts