Make Flex Grid row drag to re-order from any cell in row

Make Flex Grid row drag to re-order from any cell in row

Posted by: davidmartin-bennett on 18 January 2023, 2:21 am EST

• 

  davidmartin-bennett

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 18 January 2023, 2:21 am EST

  Hi

  I was wondering if there is a way to make the whole row drag-able?

  Currently we have the row dragging enabled but you can only reorder if you drag from the first grey column.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 18 January 2023, 3:04 pm EST

  Hello,

  To drag and drop rows from any cell, you will need to make the cells draggable by using the itemFormatter property of FlexGrid and setting the cell’s draggable property to true. Then, you may handle the various drag events on the hostElement of the FlexGrid. Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-kyrwek?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  davidmartin-bennett

  • Post Options:
  • Link
    Copy

  Posted 18 January 2023, 8:58 pm EST

  That’s almost perfect, I don’t suppose there’s a way to make the dragging preview the whole row rather than just the cell you dragged?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 19 January 2023, 6:21 pm EST

  Hello,

  Yes, you can show the entire row content while dragging the row. To achieve the desired result you may set the cell’s parent element(current selected row) to draggable instead of cells in the itemFormatter callback function. Please refer to the sample link below demonstrating the same:

  https://stackblitz.com/edit/angular-enwryh?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  davidmartin-bennett

  • Post Options:
  • Link
    Copy

  Posted 19 January 2023, 7:24 pm EST

  Perfect, thank you