Drag and drop feature in wijmo in Angular

Drag and drop feature in wijmo in Angular

Posted by: nilesh_nichal on 8 June 2023, 8:13 pm EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 June 2023, 8:13 pm EST - Updated 8 June 2023, 8:18 pm EST

  Hi Team,

  In wijmo we need a drag and drop feature, we need to drag one data cell from Source container and drop it to Destination Attribute one by one, Source container and Destination Attribute are opened side by side and not connected in single frame.
  
  Please refer below image and let us know the code reference how it can be done in angular?
  
  Thanks
  
  

  

  1914×745 63.7 KB

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 11 June 2023, 9:36 pm EST

  Hi Nilesh,

  You’ll have to handle ‘dragstart’, ‘dragover’, and ‘drop’ events on the flexGrid’s host element and manually implement this drag & drop feature on the flexGrid.

  Here’s a sample for your reference, you can modify it’s behavior as per your requirements - https://stackblitz.com/edit/angular-cswn5u?file=src%2Fapp%2Fapp.component.ts

  In case, you face any issues or if there is something we missed, please let us know.

  Regards

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 12 June 2023, 6:02 pm EST

  Hi Vivek,

  Thanks a lot for the solution. This was a critical requirement in our project. It helped us solve the issue. Once again Thankyou!

  Regards.

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 12 July 2023, 10:12 pm EST

  Hi,
  
  For the above solution provided when we try to customize the columns by adding wj-flex-grid-column and ng-template the drop feature does not work on the grid. Please could you help us with this.
  
  Thanks.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 13 July 2023, 6:03 pm EST

  Hi Nilesh,

  Sorry, but we are unable to replicate the issue on our end, could you please share a small sample in which we can replicate the issue so that we can investigate the root cause of the issue and assist you accordingly? Also please share the Wijmo version and Angular version in your project.

  Here’s the sample in which we tried to replicate the issue - https://stackblitz.com/edit/angular-bl6hgc?file=src%2Fapp%2Fapp.component.html

  You can also update the above sample to replicate your issue and share it with us. In case, if there is something we missed, please let us know.

  Regards

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 15 July 2023, 12:01 am EST

  Hi vivek,
  
  We were able to solve the issue, with the above code sample. Thankyou!.

  Regards