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

  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

  Replied 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

  Replied 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

  Replied 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

  Replied 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.
  <div class="row">
  <div class="form-group ">
  <button type="button" class="btn btn-primary btn_remove" [disabled]="isOkDisabled" (click)="removeRecord()"
  style="margin-left: 600px;">Remove</button>
  <div class="table">
  <wj-list-box #ListData [itemsSource]="name" (initialized)="initListBox(ListData)"
  (selectedIndexChanged)="displayListBoxValueInTextField(ListData)">
  </wj-list-box>
  </div>
  </div>
  </div>
  For every record that drag and drop symbol have to be added.
  
  Thank you .
  Regards,
  Nivisha Panwar
  

• Marked as Answer

  

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Replied 24 February 2021, 5:38 pm 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.
  
  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