Integration with dhtmlxTree

The stated functionality requires PRO version of the dhtmlxGrid (or DHTMLX Suite) package.

Both components need to have drag-n-drop enabled. The complexity of drag-and-drop between the tree and the grid lies in different structure of data in them. So, the user should define what values in the grid should go to the tree node and how to store them there, and vice versa.

There are two methods in the grid for this:

treeToGridElement(treeObj,treeNodeId,gridRowId);
gridToTreeElement(treeObj,treeNodeId,gridRowId);

All the user should do is to redefine them in the way he needs. For example:

// redefine tree-to-grid drop element
grid.treeToGridElement = function(treeObj,treeNodeId,gridRowId){
    this.cells(gridRowId,1).setValue(treeObj.getItemText(treeNodeId));
    if(treeObj.getUserData(treeNodeId,"c0")){
        this.cells(gridRowId,0).setValue(treeObj.getUserData(treeNodeId,"c0"));
        this.cells(gridRowId,1).setValue(treeObj.getUserData(treeNodeId,"c1"));
        this.cells(gridRowId,2).setValue(treeObj.getUserData(treeNodeId,"c2"));
        this.cells(gridRowId,3).setValue(treeObj.getUserData(treeNodeId,"c3"));
}
return !document.getElementById("dnd_copy").checked;
}
// redefine grid-to-tree drop element
grid.gridToTreeElement = function(treeObj,treeNodeId,gridRowId){
    treeObj.setItemText(treeNodeId,this.cells(gridRowId,1).getValue()+"/"
      +this.cells(gridRowId,2).getValue())           
    treeObj.setUserData(treeNodeId,"c0",this.cells(gridRowId,0).getValue())
    treeObj.setUserData(treeNodeId,"c1",this.cells(gridRowId,1).getValue())
    treeObj.setUserData(treeNodeId,"c2",this.cells(gridRowId,2).getValue())
    treeObj.setUserData(treeNodeId,"c3",this.cells(gridRowId,3).getValue())
    return !document.getElementById("dnd_copy").checked;
}