I have 3 dtatgrids:
A - list of categories
B - list of items received by dropping from C
C - list of items to be sent to B by dragging
So, basically, I want to drag an item from C to B. When I click on a category in A, B will load a already received list based on what selected in A. A web service will load the corresponding list to B based on the selection in A. The web service may return a JSON array or empty.
Now it comes the problem. When I drag an item from C and try to to drop into B. Sometimes B welcomes dropping and sometimes rejects dropping no matter whether B is empty or not. When B is not empty, sometimes I have to drop a new item onto the list and sometimes I can drop in anywhere inside B when it is welcoming dropping.
Since this behavior is not consistent, I added $('#B').datagrid('enableDnd') everywhere, like when B is initialized,when row in A or C is clicked. Unfortunately, I cannot see any help. The consistence is, when B allows dropping everywhere, I can keep doing so until I click another row in A. When B is rejecting dropping based on the selection in A, clicking other rows and then clicking back won't help.
The following is my code. Anybody can help?
<table id="A" class="easyui-datagrid" title="Eligible Org Units" data-options="
singleSelect:true,
collapsible:true,
url:'ws.cfc?method=getEligibleOrgUnit',
method:'get',
remoteSort:false,
onClickRow:function(rowIndex, rowData){
$('#B').datagrid('load','ws.cfc?method=getApprover&Org_Unit_ID='+rowData.Org_Unit_ID+'&Role=OU');
$('#B').datagrid('enableDnd');
}
" style="width:300px;height:270px">
<thead>
<tr>
<th data-options="field:'Org_Unit_Long_Name',sortable:true">Org Unit Name</th>
<th data-options="field:'Org_Unit_ID',sortable:true">Org Unit ID</th>
</tr>
</thead>
</table>
<table id="B" class="easyui-datagrid" title="Optional Unit Approval" data-options="
singleSelect:true, collapsible:true,
method:'get',
remoteSort:false,
onLoadSuccess:function(){
$('#B').datagrid('enableDnd');
},
onDblClickRow:function(rowIndex, rowData){
$.messager.confirm('Confirm','Remove '+rowData.Incumbent_Name+' from Optional Unit Approval?',function(r){
if (r){
$.ajax({
url: 'ws.cfc?method=deleteApprover',
type:'post',
data:{PUID:rowData.PUID,
Org_Unit_ID:$('#A').datagrid('getSelected').Org_Unit_ID,
Role:'OU'}
}).done(function () {
$('#B').datagrid('deleteRow',rowIndex);
$('#B').datagrid('enableDnd');
});
}
});
},
onBeforeDrop: function(targetRow,sourceRow,point){
$.ajax({
url: 'ws.cfc?method=setApprover',
type:'post',
data:{PUID:sourceRow.PUID,
Org_Unit_ID:$('#A').datagrid('getSelected').Org_Unit_ID,
Role:'OU'}
}).done(function () {
$('#B').datagrid('appendRow',{
Incumbent_Name: sourceRow.Incumbent_Name,
PUID: sourceRow.PUID
});
$('#B').datagrid('enableDnd');
});
return false;
}
" style="width:300px;height:180px">
<thead>
<tr>
<th data-options="field:'Incumbent_Name',sortable:true">Name</th>
<th data-options="field:'PUID',sortable:true">PUID</th>
</tr>
</thead>
</table>
<table id="C" class="easyui-datagrid" data-options="
singleSelect:true, collapsible:true,revert:true,proxy:'clone',
method:'get', remoteSort:false, toolbar:'#tb',
onLoadSuccess:function(){
$(this).datagrid('enableDnd');
},
onClickRow:function(rowIndex, rowData){
$('#B').datagrid('enableDnd');
}
" title="Employees" style="width:300px;height:270px">
<thead>
<tr>
<th data-options="field:'Incumbent_Name',sortable:true">Employee Name</th>
<th data-options="field:'Org_Unit_Long_Name',sortable:true">Org Unit Name</th>
<th data-options="field:'PUID',sortable:true">PUID</th>
</tr>
</thead>
</table>
