2 table drag and drop

Jonvil123

Hi guys

Hope you are all well.

Hope you can help me with this again. Can i have 2 tables then from 1 table to another table drag and drop multiple selected records. Please help. thanks so much for always helping me.
Hope you all enjoy your christmas. be happy always.

colin

Hi @Jonvil123 ,

@kthorngren posted a couple of examples doing just this recently, see here and here.

Cheers,

Colin

Jonvil123

Hi @colin

Thanks.

How can i drag multiple row. please help.

Thank you so much. belated merry xmas ☺

kthorngren

You would need to read through the docs of the HTML5 or jQuery UI draggable libraries to see if either supports dragging multiple elements. Then it would be an exercises to update the appropriate example with that code. To me that seems like a lot of work so I would take a look at using the Select Extension for this. The problem is that neither of those libraries will understand the Select Extension.

To use Select I would follow the HTML5 example I posted and in the drag start handler store the selected rows in a global variable. In the drop handler use that global variable to insert the selected rows in the destination table using rows.add(), probably will need to use the data() API to get the data from the global variable. Then remove the rows from the source table using rows().remove(), probably need to use the indexes() of the global variable to when removing.

You should be able to follow the pattern in the pattern in the HTML5 example to use the above. I would recommend cloning the example and trying to workout what you want to do that way if you have questions we can help.

Kevin

kthorngren

I created an example for you from your request in this thread. You can find the link to the example the HTML5 Draggable thread.

Kevin

Jonvil123

hi kevin @kthorngren

many thanks for the help

do you have sample also without the checkbox? if its okay

thank you so much for always helping

kthorngren

Here you go:
https://jsbin.com/voqehoq/edit?html,css,js,output

Kevin

Jonvil123

Thanks so much kevin @kthorngren ☺

Lmarrero

Hello!, great job!!
I'm trying to use this code but my data is from a db, so i want to drag the selected rows and take the names from table 1 and insert them to table 2 via ajax call to another db.
Hope you can help me.
Thanks and sorry for my english

kthorngren

Are you saying that you want to drag from table 1, use ajax to update table 2 then refresh table 2 via ajax?

The handleDrop function is where you would process the ajax request to update table 2 instead of adding the row to the table. In the success function of the ajax call you can have table 2 use ajax.reload() to refresh its table via ajax.

Kevin