EasyUI Forum

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>

Some update:

It looks like B can allow only 1(one) drop no matter how I click in A to load data for B. One I have 1 drop in B, B must have rows to receive dropping. If I then click in A and there is no data loaded for B. B won't accept dropping when it is empty.