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

Title: Is it possible to use drag and drop in datagrid and save the data in new order
Post by: rabesh on August 30, 2012, 02:15:32 AM

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

Title: Re: Is it possible to use drag and drop in datagrid and save the data in new order
Post by: stworthy on August 30, 2012, 05:39:49 AM

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);
	}
});

Title: Re: Is it possible to use drag and drop in datagrid and save the data in new order
Post by: rabesh on August 31, 2012, 05:07:49 AM

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

Title: Re: Is it possible to use drag and drop in datagrid and save the data in new order
Post by: stworthy on August 31, 2012, 06:09:14 AM

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(){
//...
}
})

Title: Re: Is it possible to use drag and drop in datagrid and save the data in new order
Post by: shrikantphale on September 18, 2012, 06:06:49 AM

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!!!!!

Title: Re: Is it possible to use drag and drop in datagrid and save the data in new order
Post by: rabesh on September 24, 2012, 04:07:58 AM

But id didnt give any id

Title: Re: Is it possible to use drag and drop in datagrid and save the data in new order
Post by: shrikantphale on September 26, 2012, 04:08:00 AM

plz provide idField:'id' to data grid

Title: Re: Is it possible to use drag and drop in datagrid and save the data in new order
Post by: rabesh on November 11, 2012, 03:47:20 AM

and how to disable dnd

Title: Re: Is it possible to use drag and drop in datagrid and save the data in new order
Post by: stick703 on November 12, 2012, 06:34:50 PM

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.

Title: Re: Is it possible to use drag and drop in datagrid and save the data in new order
Post by: Ellipsis on December 06, 2012, 03:03:22 AM

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

Title: Re: Is it possible to use drag and drop in datagrid and save the data in new order
Post by: rabesh on December 06, 2012, 09:47:18 PM

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..

EasyUI Forum

General Category => General Discussion => Topic started by: rabesh on August 30, 2012, 02:15:32 AM