Drag and drop functionality in wijmo listbox

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

  • Posted 21 February 2021, 5:12 pm EST


    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.

  • 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:
    You may simply copy-paste the listDrag.ts file in your application.

  • 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.

  • 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:
    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?

  • 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.
    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)"
    For every record that drag and drop symbol have to be added.

    Thank you .
    Nivisha Panwar
  • Marked as Answer

    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.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels