Grid drag and drop

[dan123Participant]

Hi i created this example of drag and drop rows within a grid itself. I am almost done just need a small help with this. I was able to drag and drop a selected row, but I was wondering when dropping to another row, the selected row will receive this row’s data. So kind of like a switching of rows.

Finished so far: Drag and drop works but selected row not receive row data of the other row(dropped row)

Example:
Selected row 1: Martin dragged this to row 2: Andrew.

Outcome should show: row 1: Andrew and row 2: Martin.

Here is my jsfiddle:
https://jsfiddle.net/ZAkyj/589/

Note: I noticed from this forum post about getting row data of the dropped row but not sure how though
gridCells.on(‘dragEnd’, function (event) {
var draggedRow = $(this).jqxDragDrop(‘data’); // this is the dragged row, has the complete row data
var position = $.jqx.position(event.args);// mouse position
var cell = gridSelector.jqxGrid(‘getcellatposition’, position.left, position.top); //get the cell under that position
var dropRow = parseInt(cell.row);

var droppedRow = gridSelector.jqxGrid(‘getrowdata’, dropRow); // this is the row where the drop occurred – complete row data

// assuming you have a id column, make a ajax call using the draggedRow.id and droppedRow.id and sort them manually.

});

[HristoParticipant]

Hello dan123,

Unfortunately, there is no such feature.
About the mentioned example it does not exactly drag & drop functionality because it must reorder other rows (up or down depends on the logic) to put dragged row.
I would suggest you a workaround for your case. Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dan123Participant]

Oh wow thank you so much. Your awesome. I was wondering is there a way during the dragEnd to have the rows go downward? So suppose I dragged the last row to the top, so now it will put the rest of the rows below the dragged row.

[dan123Participant]

Hi Hristo, I noticed whenever I drag a row outside of the grid it does not return the value back to the grid. It just disappears

Here is your jsfiddle:
https://jsfiddle.net/txhi/n4tb838h/

[HristoParticipant]

Hello dan123,

Try to add validation when drop item out of the Grid and return old value or stop the whole process.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dan123Participant]

Hi Hristo,

Sorry but I cant seem to add the validation when dropping item outside of the Grid, it doesnt return the old value or stop the whole process.

Here is your jsfiddle:
https://jsfiddle.net/txhi/n4tb838h/

[Author]

Posts