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

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

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

Learn More

Forum Channels