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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

132558 Sep 8,2017 08:23 AM Sep 13,2017 07:35 AM ASP.NET MVC 5
loading
Tags: ListBox
Paul Kocher
Asked On September 8, 2017 08:23 AM

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 [Syncfusion]
Replied On September 11, 2017 05:00 AM

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. 


Paul Kocher
Replied On September 11, 2017 05:06 AM

Hi Selvamani,

exactly what I was looking for. Thanks :)


Selvamani Sankarappan [Syncfusion]
Replied On September 12, 2017 12:19 AM

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


Paul Kocher
Replied On September 12, 2017 05:03 AM

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

Selvamani Sankarappan [Syncfusion]
Replied On September 13, 2017 07:35 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;