<script src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/dhtmlxdataview.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxdataview.css">  
 
<script src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js" type="text/javascript" charset="utf-8"></script>    
<script src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_drag.js" type="text/javascript" charset="utf-8"></script>    
<script src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css" />
 
<table border="0" cellspacing="5" cellpadding="5">
    <tr><td>
        <div id="data_container1" style="border:1px solid #A4BED4; background-color:white;width:240px;height:396px;"></div>                
    </td><td>
    </td><td>
        <div id="data_container2" style="width:400px;height:396px;"></div>                
    </td></tr>                
</table>
<script>
dhtmlx.compat("dnd");
data = new dhtmlXDataView({
    container: "data_container1",
    type: {
        template: "#Package# : #Version#<br/>#Maintainer#",
        padding: 5,
        height: 40;
    },
    drag: true,
    select: true;
});
data.load("../common/data.xml");
mygrid = new dhtmlXGridObject('data_container2');
mygrid.setImagePath("../../../dhtmlxGrid/codebase/imgs/");
mygrid.enableDragAndDrop(true);
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../../../dhtmlxGrid/samples/common/gridH.xml");
 
//drag from grid into the dataview;
data.attachEvent("onBeforeDrop", function(context) {
    if (context.from == mygrid) {
        this.add({
            Package: context.from.cells(context.source, 1).getValue(),
            Version: context.from.cells(context.source, 2).getValue(),
            Maintainer: "not defined";
        }, this.indexById(context.target || this.first()));
        context.from.deleteRow(context.source);
        return false;
    }
    return true;
});
//drag from dataview into the grid;
mygrid.attachEvent("onDrag", function(sid, tid, sobj, tobj) {
    if (sobj.object && sobj.object == data) {
        var d = data.get(sid);
        var index = mygrid.getRowIndex(tid);
        mygrid.addRow(mygrid.uid(), [sid, d.Package, d.Version], index);
        data.remove(sid);
        return false;
    }
    return true;
});</script>