Is it possible to use drag and drop in datagrid and save the data in new order

[rabesh]

I've been using datagrids of your (Jquery EasyUI) Plugins. I need re-order the rows (NOT sort) preferably by drag and dropping and save that reording into database with new order.

Please help

I try alot to solve this but unable to solve. Is this plugins have such facility or not?

Thanks a lot for helping me in advance

[stworthy]

Similar to the drag and drop feature in treegrid http://www.jeasyui.com/forum/index.php?topic=575.0, it is possible to extend a 'enableDnd' method to drag and drop rows in datagrid. Please include 'datagrid-dnd.js' in page head.

Code:

	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../datagrid-dnd.js"></script>

Call 'enableDnd' method to enable drag and drop feature in datagrid.

Code:

$('#dg').datagrid({
	onLoadSuccess:function(){
		$(this).datagrid('enableDnd');
	},
	onDrop:function(destRow,sourceRow,point){
		console.log(destRow);
		console.log(sourceRow);
		console.log(point);
	}
});

[rabesh]

Thanks alot for your help,

There is only three parameters which only display row which one you drag, row insert before you drop and top or buttom,
But i need other parameters which display whole position of the datagrid after drag and drop so that i can get id from that and save in database with new order using ajax.

So plz help me how to get whole row of data grid in array as like in other plugins

Thanks in advance for your kind help

Rabesh

[stworthy]

Each row contain id field if you define it, so you can get id value easily. Get these id values and then post them to server,in which you can move the source row to after or before the dest row in database.

Code:

onDrop:function(destRow,sourceRow,point){
var destId = destRow.id;  // get dropped row id
var sourceId = sourceRow.id;  // the dragged row id
$.post('...',{
destId:destId,
sourceId:sourceId,
point:point
},function(){
//...
}
})

[shrikantphale]

To get whole position of the datagrid after drag and drop use following code...

$('#dg').datagrid({
             onLoadSuccess:function(){
                $(this).datagrid('enableDnd');
             },
             onDrop:function(destRow,sourceRow,point){
                                
                var newPosIds = [];                        
                
                $('#dg').datagrid('selectAll');
                
                var rows = $('#dg').datagrid('getSelections');                                
                
                for(var i=0; i<rows.length; i++){                     
                   newPosIds.push(rows.id);                       
                }
                
                alert(newPosIds);
                
                $('#dg').datagrid('unselectAll');
                
             }
          });

newPosIds gives you New Position of all ids of the grid...
Hope it will help you...
Enjoy!!!!!

[rabesh]

But id didnt give any id

[shrikantphale]

plz provide idField:'id' to data grid

[rabesh]

and how to disable dnd

[stick703]

The code posted in this thread appears to work within a single datagrid... has anyone done drag-n-drop between two different datagrids? I've got a scenario where I've got a list of things in one datagrid, and I'd like to be able to pick and choose from this list and drag items into another datagrid.

[Ellipsis]

Drag and drop between Two grids would be great indeed!!

[rabesh]

Drag and drop between two different grid is great idea but i didnt did that but i did in single grid....

any one have idea how to drag and drop in two different data grids..