We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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?


5 Replies

SS Selvamani Sankarappan Syncfusion Team September 11, 2017 09:00 AM UTC

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: 
 
Refer to the following API link: 
 
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. 



PK Paul Kocher September 11, 2017 09:06 AM UTC

Hi Selvamani,

exactly what I was looking for. Thanks :)



SS Selvamani Sankarappan Syncfusion Team September 12, 2017 04:19 AM UTC

Hi Paul, 
 
Thanks for the update. 
 
Let us know if you need any further assistance. 
 
Regards, 
 
Selvamani S. 



PK Paul Kocher September 12, 2017 09:03 AM UTC

Hi Selvamani,

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

listItemObject |stringThis 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....


SS Selvamani Sankarappan Syncfusion Team September 13, 2017 11:35 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon