Drag and Drop between DataTables

PashaTech

Hi,

Need your help to implement Drag and Drop records between two DataTables.

1.First DataTable should have child records(child table with rows and same header of parent row) for each record.
2.Should be able to drag child records from one DataTable to another DataTable.

Thanks in advance.
Regards

allan

This should be quite possible using the row.add(), row().data() and row().remove() API methods. You'd need to use another library for the dragging of the row, or write a little bit of code to do it, but those three methods are what are needed from the DataTables API.

Allan

PashaTech

Thanks Allan.
Could you please provide sample implementation for Drag and Drop records between two datatables.
First datatable should be of tree view structure where each record should have child records(row expandable or collapse)

allan

Certainly - if you could drop me a PM by clicking my name above I'd be happy to give a quote for the work involved. I'd need to know a few more details such as what application framework and libraries you are using before I can provide a quote - so if you have a link to your current page that would be useful.

Allan

PashaTech

Thanks Allan.

Now, I'm able to drag and drop between two datatables but whenever i include scrollX due to number of columns on both the datatables, the dragged row object remains moving within the same datatable but doesn't comes out of the datatable and gets dropped to next datatable when mouse cursor reaches to the next datatable.

Could you please help me in this regard.

allan

Sounds like you might be attaching the "floating" row inside the DataTables scrolling container. You would need to attach it to the body element.

Allan

PashaTech

It doesn't happen when there are few columns with no horizontal scroll bar. Problem appears only when there are number of columns with horizontal scroll bar.

The dragged row object moves within the datatable but doesnt come out of the container and accordingly horizontal scroll moves without the mouse movement but it gets dropped when mouse cursor is taken to the next datatable.

I'm using sortable function and am attaching it to body element tbody

$(".items tbody").sortable({
helper: fixHelper,
connectWith: ".linked tbody"
});

PashaTech

Hi Allan,

Do you have any update on this?

I've referred the following link and implemented it which is using jQuery sortable.

https://gist.github.com/davemo/706167

Could please guide how to proceed with drag and drop between two datatables?

Thanks & Regards

allan

Hi,

I suggested the API methods that you would need to use above. If you'd like me to code it up for you I can provide a quote.

Allan

PashaTech

Thanks Alan but I'm developing for a non-commercial purpose and loved the DataTable as it's best among the open source.

I'm using jquery sortable to drag and drop between two datatables. When i drop the records from table 1 to table 2, then it just shown in UI but the aodata is not getting updated so i used row.add method to add the data in table 2 and row.remove to delete the data from table1.

I'd also want the dragging object to come out of the table1 instead its moving within the table but when the mouse cursor reaches table2 it gets added.

Any help would be highly appreciated

PashaTech

Hi Alan,

I was able to implement Drag and Drop records between adjacent DataTables and everything works fine as expected.

Initially i'd 12 columns in both the tables and drag/drop worked fine without any issues.

I'm facing issue with Drag/Drop after increasing the columns to 45 in both the DataTables.

When i try to drag the record from datatable1 the dragged object gets dropped to the same datatable1 even though i dropped on top of datatable2. This is happening only after increasing the columns to 45.

Your help is highly appreciated.

Thanks

allan

I'm afraid without access to the page showing the issue I really couldn't even begin to guess why that is happening. It sounds like there is an error in the drag / drop logic somewhere.

Allan