EasyUI Forum
June 19, 2024, 04:17:36 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Is it possible to use drag and drop in datagrid and save the data in new order  (Read 40016 times)
rabesh
Newbie
*
Posts: 12


View Profile
« 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

Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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);
}
});
« Last Edit: May 15, 2013, 06:23:41 PM by stworthy » Logged
rabesh
Newbie
*
Posts: 12


View Profile
« Reply #2 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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 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(){
//...
}
})
Logged
shrikantphale
Newbie
*
Posts: 4


View Profile Email
« Reply #4 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!!!!!
Logged
rabesh
Newbie
*
Posts: 12


View Profile
« Reply #5 on: September 24, 2012, 04:07:58 AM »

But id didnt give any id
Logged
shrikantphale
Newbie
*
Posts: 4


View Profile Email
« Reply #6 on: September 26, 2012, 04:08:00 AM »

plz provide idField:'id' to data grid
Logged
rabesh
Newbie
*
Posts: 12


View Profile
« Reply #7 on: November 11, 2012, 03:47:20 AM »

and how to disable dnd
Logged
stick703
Newbie
*
Posts: 1


View Profile
« Reply #8 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.
Logged
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« Reply #9 on: December 06, 2012, 03:03:22 AM »

Drag and drop between Two grids would be great indeed!!
Logged
rabesh
Newbie
*
Posts: 12


View Profile
« Reply #10 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..
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!