Print Page - How to set datagrid drag and drop in it's own grid?

Title: How to set datagrid drag and drop in it's own grid?
Post by: James on November 23, 2015, 09:53:55 PM

I have a datagrid(Agrid) enabled drag and drop,
"onDblClickRow" popup an window with a new datagrid(Bgrid) enabled drag and drop too,
and when this window is over Agrid, if you drag a row in Bgrid, it will be drop into Agrid,
this is not what I want to do, I need rows only be drag and drop in it's own grid.

I think it should be an option as "group" to mark those grids which can accept each other's rows,
without this option, row should only be drag and drop in it's own grid.

but I did not find such an option.

Is there any solution to make Bgrid's row drag and drop in it's own grid?

Title: Re: How to set datagrid drag and drop in it's own grid?
Post by: jarry on November 24, 2015, 07:03:42 PM

Suppose the rows in Bgrid have a 'flag' field that does not exist in Agrid, then you can use the 'onDragEnter' event to restrict what rows can be dropped.

Code:

$('#Agrid').datagrid({
	onLoadSuccess:function(){
		$(this).datagrid('enableDnd');
	},
	onDragEnter:function(targetRow,sourceRow){
		if (sourceRow.flag){
			return false;
		}
	}       		
})

Title: Re: How to set datagrid drag and drop in it's own grid?
Post by: James on November 24, 2015, 11:33:05 PM

Quote from: jarry on November 24, 2015, 07:03:42 PM

Suppose the rows in Bgrid have a 'flag' field that does not exist in Agrid, then you can use the 'onDragEnter' event to restrict what rows can be dropped.

Code:

$('#Agrid').datagrid({
	onLoadSuccess:function(){
		$(this).datagrid('enableDnd');
	},
	onDragEnter:function(targetRow,sourceRow){
		if (sourceRow.flag){
			return false;
		}
	}       		
})

This is not ok at all, what I need is Bgrid row can not drag to Agrid.
Your code do make Agrid reject Bgrid row, but this two grids still can drag rows to eachother.

Title: Re: How to set datagrid drag and drop in it's own grid?
Post by: James on November 25, 2015, 12:34:29 AM

parent page

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="/Public/plugs/easyui/themes/default/easyui.css"/>
<link rel="stylesheet" href="/Public/css/icon.css">
<script src="/Public/plugs/easyui/jquery.min.js"></script>
<script src="/Public/plugs/easyui/jquery.easyui.min.js"></script>
<script src="/Public/plugs/easyui/plugins/dnd/treegrid-dnd.js"></script>
<script src="/Public/plugs/easyui/plugins/dnd/datagrid-dnd.js"></script>
<script>
    var data = {"total":28,"rows":[
        {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
        {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
        {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
        {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
        {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
        {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
        {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
        {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
        {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
        {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
    ]};
	$(function(){
		$('#winpop').linkbutton({
			text:'Win'
		}).bind('click',function(){
			$('#win').window({
				width:600,
				height:400,
				modal:true,
				inline:true,
				href:'win-treegrid-dnd.html',
			});
		})
	})
</script>
</head>
<body>
<div class="easyui-panel" title="My Panel"  style="width:700px;height:500px;">
    <table class="easyui-datagrid" data-options="
    			fit:true,
                border:0,
                toolbar:'#toolbar',
                fitColumns:true,
				singleSelect:true,
				data:data,
				onLoadSuccess:function(){
					$(this).datagrid('enableDnd');
                     console.info('datagrid-dnd');
				}
			">
      <thead>
        <tr>
          <th data-options="field:'itemid',width:80">Item ID</th>
          <th data-options="field:'productid',width:100">Product</th>
          <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
          <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
          <th data-options="field:'attr1',width:250">Attribute</th>
          <th data-options="field:'status',width:60,align:'center'">Status</th>
        </tr>
      </thead>
    </table>
    <div id="toolbar"><a id="winpop"></a></div>
    <div id="win"></div>
</div>

</body>
</html>

win-treegrid-dnd.html

Code:

<script type="text/javascript">
var treegriddata = [{
	"id":1,
	"name":"C",
	"size":"",
	"date":"02/19/2010",
	"children":[{
		"id":2,
		"name":"Program Files",
		"size":"120 MB",
		"date":"03/20/2010",
		"children":[{
			"id":21,
			"name":"Java",
			"size":"",
			"date":"01/13/2010",
			"state":"closed",
			"children":[{
				"id":211,
				"name":"java.exe",
				"size":"142 KB",
				"date":"01/13/2010"
			},{
				"id":212,
				"name":"jawt.dll",
				"size":"5 KB",
				"date":"01/13/2010"
			}]
		},{
			"id":22,
			"name":"MySQL",
			"size":"",
			"date":"01/13/2010",
			"state":"closed",
			"children":[{
				"id":221,
				"name":"my.ini",
				"size":"10 KB",
				"date":"02/26/2009"
			},{
				"id":222,
				"name":"my-huge.ini",
				"size":"5 KB",
				"date":"02/26/2009"
			},{
				"id":223,
				"name":"my-large.ini",
				"size":"5 KB",
				"date":"02/26/2009"
			}]
		}]
	},{
		"id":3,
		"name":"eclipse",
		"size":"",
		"date":"01/20/2010",
		"children":[{
			"id":31,
			"name":"eclipse.exe",
			"size":"56 KB",
			"date":"05/19/2009"
		},{
			"id":32,
			"name":"eclipse.ini",
			"size":"1 KB",
			"date":"04/20/2010"
		},{
			"id":33,
			"name":"notice.html",
			"size":"7 KB",
			"date":"03/17/2005"
		}]
	}]
}]
</script>
<table class="easyui-treegrid"
        data-options="
        	fit:true,
            data: treegriddata,
            border:false,
            rownumbers: true,
            idField: 'id',
            treeField: 'name',
            onLoadSuccess: function(row){
                $(this).treegrid('enableDnd', row?row.id:null);
                console.info('treegrid-dnd');
            }
        ">
    <thead>
        <tr>
            <th data-options="field:'name'" width="200">Name</th>
            <th data-options="field:'size'" width="100" align="right">Size</th>
            <th data-options="field:'date'" width="200">Modified Date</th>
        </tr>
    </thead>
</table>

Title: Re: How to set datagrid drag and drop in it's own grid?
Post by: James on November 25, 2015, 12:38:50 AM

as my code shows, you can not drag treegrid row in the window , because it will drop into datagrid backgroud.
but if you move window out of datagrid area , it can drag and dorp as it should be.

Title: Re: How to set datagrid drag and drop in it's own grid?
Post by: jarry on November 25, 2015, 06:13:58 AM

The 'onDragEnter' function should be defined as:

Code:

onDragEnter:function(targetRow,sourceRow){
	if (sourceRow.name){
		return false;
	}
}

For more information please refer to http://jsfiddle.net/tc4rvkb2/.

Another solution is to reset the 'dropAccept' property for the datagrid, please refer to http://jsfiddle.net/tc4rvkb2/1/. Before using the 'dropAccept' property, please download the newest 'datagrid-dnd.js' and 'treegrid-dnd.js' files from http://www.jeasyui.com/extension/index.php

Title: Re: How to set datagrid drag and drop in it's own grid?
Post by: James on November 25, 2015, 08:07:10 PM

Code:

onDragEnter:function(targetRow,sourceRow){
	if (sourceRow.name){
		return false;
	}
}

this property is good , but all my grid columns are read from database, different grid different columns, I can't tell which column is unique to another.

dropAccept can tell sourceRow come from datagrid or treegrid,but it still can not tell which grid it come from.

In my opinion datagrid/treegrid need an "dropGroup" property to set those have the same dropGroup value, they can accept each other's row. if you don't set this property, rows you drag, should only drop in it's own grid or tree.

Hope you can add this property in next version.

Title: Re: How to set datagrid drag and drop in it's own grid?
Post by: James on November 25, 2015, 09:57:28 PM

onDragEnter:function(targetRow,sourceRow){
   if (sourceRow.name){
      return false;
   }
}

This will not work if both grid are treegrids.
http://jsfiddle.net/tc4rvkb2/3/

Title: Re: How to set datagrid drag and drop in it's own grid?
Post by: jarry on November 25, 2015, 11:36:35 PM

Please refer to http://jsfiddle.net/tc4rvkb2/4/

EasyUI Forum

General Category => Bug Report => Topic started by: James on November 23, 2015, 09:53:55 PM