Question about drag & drop (Would like to "copy" instead of "move")

[Paul Kocher]

Hi!

Let's say I have 4 ListBoxes - First one is the source, the other ones are for associated roles of the user. I'd like to be able to drag and drop the user to multiple ListBoxes instead of moving him around.

Is there a way to achieve this?

[Selvamani Sankarappan]

Hi Paul, 

 

Thanks for contacting Syncfusion support. 

 

As per current behavior, did not support the copy and paste the list items. But, you can add the dragged item again in that ListBox using addItem method at itemDrop event. Please refer to the following code example: 

 

[script] 

function itemdrop(args) { 

           var data = args.droppedItemText; 

           var obj = $('#selectskills').ejListBox("instance"); 

           obj.addItem(data, index); // pass the index position 

        } 

 

Refer to the following sample: 

http://jsplayground.syncfusion.com/am5pfwzp 

 

Refer to the following API link: 

https://help.syncfusion.com/api/js/ejlistbox#methods:additem 

 

If the above does not meet your requirement, kindly share us the modified sample or mode details to provide an appropriate solution at the earliest. 

 

Regards, 

Selvamani S. 

[Paul Kocher]

Hi Selvamani,

exactly what I was looking for. Thanks :)

[Selvamani Sankarappan]

Hi Paul, 

 

Thanks for the update. 

 

Let us know if you need any further assistance. 

 

Regards, 

 

Selvamani S. 

[Paul Kocher]

Hi Selvamani,

unfortunately this didn't work as expected. I'm using JSON as source so I read in the documentation:

listItem

Object |string

This can be a list item object (for JSON binding) or a string (for UL and LI rendering). Also we can the specify this as an array of list item object or an array of strings to add multiple items.

Would you be so kind to explain how I can add the item back to the list again?

The console.log does show the right index and value but when I try to add it it doesn't gets added

Edit:

Well actually I got this working by just refreshing the ListBox itself - the data isn't "moved" as I thought. Now I have this problem:

It just doesn't refresh itself - when clicking the trash bin I'm really removing this entry from the list - when I refresh the page the entry is, as expected, gone....

[Selvamani Sankarappan]

Hi Paul, 

 

Thanks for the update. 

 

We have checked your video and we need to update the dataSource again manually for dropped ListBox because while page loading the dropped items has removed. You need to pass the dropped items to controller through AJAX post and then you can store the model or database. Because on navigating through various pages, controls gets reinitialized, so we need to update data source for it. Please refer to the following code example: 

 

[script] 

function onClick(args) { 

        var dataSrc = $("#listboxsample1").ejListBox("instance"); 

        var data = JSON.stringify(dataSrc.model.dataSource); 

        $.ajax({ 

            type: 'POST', 

            content: "application/json; charset=utf-8", 

            url: '@Url.Action("sample", "ListBox")', 

            data: { selectedtext: data },// send to server as stringified data 

            success: function (response) {               

            } 

        }); 

        window.location = 'test';           

    } 

[cs] 

public ActionResult sample(string selectedtext) 

        { 

            var values = JsonConvert.DeserializeObject(selectedtext); //get the dropped items 

            List<language> lang = new List<language>();            

            ViewBag.datasource12 = values; 

            return View(); 

        } 

 

Refer to the following sample: 

http://www.syncfusion.com/downloads/support/forum/132558/ze/listboxsample1_(5)-1433772556 

 

If the above does not meet your requirement, kindly share us the facing issues and details. We will check and provide an appropriate solution at the earliest. 

 

Regards, 

 

Selvamani S.