Drag and drop functionality in wijmo listbox

Drag and drop functionality in wijmo listbox

Posted by: nivishapanwar on 21 February 2021, 5:12 pm EST

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 February 2021, 5:12 pm EST

  Hello,

  According to my project requirement, the records in listbox should be dragged and dropped anywhere in the listbox .For every record in the listbox a black dot is present , so that when we click on that that specific record can be dragged and dropped in other place in listbox.
  
  Is that possible in wijmo listbox?

  Thank you.

  Regards,
  
  Nivisha

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 22 February 2021, 11:20 pm EST

  Hi Nivisha,

  I’ve prepared a utility function for you to enable drag-drop in listbox. Please refer to the following sample which demonstrates the same:
  
  https://codesandbox.io/s/wijmo-angular-forked-dyrh3?file=/src/app/app.component.ts
  
  You may simply copy-paste the listDrag.ts file in your application.

  Regards

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 23 February 2021, 2:12 am EST

  Hello Sharad,
  
  Thank you for the help. It worked for me.
  
  Can we use bento drag and drop icon inside the wijmo listbox?

  Thank you.

  Regards,
  
  Nivisha

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 24 February 2021, 12:27 am EST

  Hi Nivisha,

  you may use formatItem event to add icons inside the list. Please refer to the following demo which demonstrates the same:
  
  https://www.grapecity.com/wijmo/demos/Input/ListBox/Customization/purejs
  
  I couldn’t find any public bento packages, If you need to prepare a sample using bento-icons then please share some resources/document URL where I could get and refer to use the bento icons?

  Regards

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 24 February 2021, 1:09 am EST

  Hello Sharad,
  
  Yeah I have checked formatitem yesterday, but it dont have the drag and drop icon.
  
  The bento icon which have to be used is bento-icon-drag-drop.
  
  https://ng.bento.ui.int.thomsonreuters.com/components/icons
  
  I have attached the sample screen.

  Remove

  For every record that drag and drop symbol have to be added.

  Thank you .
  
  Regards,
  
  Nivisha Panwar

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 24 February 2021, 5:38 pm EST - Updated 3 October 2022, 4:55 am EST

  I’m unable to open the shared URL. Please make sure it is a public URL.
  
  It shows “This site can’t be reached” error.
  
  

  

  1275×622 15.4 KB

  
  
  Or if your resources are private and you can’t share them here then you may create a ticket on our private support portal and share the resources there.
  
  https://www.grapecity.com/my-account/my-support