Grid row drag and drop

[abigailMember]

Hi, I am attempting to emulate jQuery table drag and drop functionality in a JQ Widgets grid.  Users need to be able to drag entire rows up and down in order to re-sort the rows.  We are implementing the grid to replace an ASP list view control, where we had easily implemented this functionality using the table DnD plugin.  This plugin does not appear to work with the JQ Widgets grid and I’m having a tough time emulating the functionality (although I am very pleased with the performance gain achieved by switching to the jqw grid.)  Does anyone have advice for the best approach to do doing this?  Any help is appreciated, thanks!

[Peter StoevKeymaster]

Hi abigail,

It is possible to implement Drag and Drop with jqxGrid, but it is not possible to reorder rows.
Two Drag & Drop samples with jqxGrid and jqxDragDrop.

1. dragdrop.htm
2. dragdropgridrecordtoform.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[abigailMember]

Thanks Peter. I should have mentioned that I viewed the demos and am able to get a table cell draggable. I can even construct the feedback string so that it looks like the whole row is being dragged. I just can’t get any useful information on the drag stop event. My situation is different from the demos because my drop is within the same grid. If I could determine the row the cell was dropped on, I could update the sort order programatically and refresh the grid. Is this possible? If not, is it possible to construct the grid in such a way that it renders as an html table?
Thanks,
Abigail

[Peter StoevKeymaster]

You can get the cell under the mouse cursor in the dragEnd event and this is demonstrated in the dragdrop.htm.

gridCells.bind('dragEnd', function (event) {
                var value = $(this).text();
                var cell = $("#grid2").jqxGrid('getcellatposition', event.args.pageX, event.args.pageY);
                if (cell != null) {
                    $("#grid2").jqxGrid('setcellvalue', cell.row, cell.column, value);
                }
            });

Having the cell, you can get the row by using the cell’s row field.

var rowIndex = cell.row;

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[abigailMember]

Works perfectly, this is just what I needed to wrap up the re-sort. Thank you!

[Alantod17Participant]

Hi abigail

I am working on the in grid drag and drop for re-sorting as well

could you post your solution so I can have some idea how to do it

Thanks
D

[mohamedazherParticipant]

Hi,

To implement drag drop re-sorting within a single grid you can do something like this.

Follow the drag drop examples given but set the dropTarget as the same grid. $(“jqxGrid”).

To get the dragged row and the row where it was dropped, do the following

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.

});

This is the best what i could but gets the work done.

Regards,
Mohamed Azher

[Author]

Posts