Start Building Professional
Web Apps Today

grid 2 tree drag-and-drop

Hi,

I've a problem with drag-and-drop from Grid to Tree.
I've done 2 funcion as descrived in docs, but just one seems to be working. On explorer Grid2Tree is forbidden (the mouse cursor change to a denied icon an no event is fired) while on firefox the Tree2Grid event is fired instead of the Grid2Tree one.

the Tree2Grid event id fired correctly.

Here is my init code for Grid and tree:
----------------------
function initGrid(){
    mygrid = new dhtmlXGridObject('gridbox','100%','100%');
    mygrid.setImagePath("imgs/grid/");
    
    //set data format for calendar
    mygrid._dtmask="y-m-d";
    
    mygrid.enablePagingWT(true,1000,null,"pagingArea",true);
    mygrid.setSkin("light");
    mygrid.enableMultiselect(true);
    mygrid.enableColumnAutoSize(true);
    mygrid.enableDragAndDrop(true);
    
    var aGridMenu=new dhtmlXContextMenuObject(1,0,'');
mygrid.enableContextMenu(aGridMenu);
    
    mygrid.attachEvent("onBeforeContextMenu","openGridMenu");    
    mygrid.attachEvent("onRowDblClicked","openEditObject");
mygrid.attachEvent("onEditCell","gridEditCell");
mygrid.attachEvent("onXLS", "onGridLoadingStart" );
mygrid.attachEvent("onXLE", "onGridLoadingEnd" );

mygrid.gridError = function(txt){ alert("Server Side Grid Error:"+txt);}

    //mygrid.attachEvent("onDrop", function(){alert('ondrop');return false;});    
    
    mygrid.rowToDragElement = function (id)
    {
        var strToDrag = "<table style='font-size:x-small;'><tr><td><img src='" + this.cells(id,0).getValue() + "' ></td><td>";
        strToDrag += this.cells(id,1).getValue() + "<br/>";

         if(this.cells(id,2).getValue()!="" || this.cells(id,2).getValue()!=" ")
            strToDrag += this.cells(id,2).getValue() + "<br/>";
        if(this.cells(id,3).getValue()!="" || this.cells(id,3).getValue()!=" ")
            strToDrag += this.cells(id,3).getValue() + "<br/>";
        strToDrag += "</td></tr></table>"
         return strToDrag;
    }
    
    
    mygrid.gridToTreeElement = function(treeObj,treeNodeId,gridRowId){
        alert( "you are moving treeObj " + treeObj + " treeNode "+treeNodeId+ " gridRow " +gridRowId);
        return false;
    }
    
    mygrid.treeToGridElement = function(treeObj,treeNodeId,gridRowId){

        parent.log(treeObj+","+treeNodeId+","+gridRowId);

        var p = "SRC="+treeNodeId+"&DST="+currdir+"&MODE=o2f";
            p += "&SRCNAME="+tree.getItemText(treeNodeId);
            p += "&DSTNAME="+tree.getItemText(currdir);
        parent.showPromptDialog("Folder Drag&Drop",400,180,"/be3a5/GUI/content/html/cnt_folderdrag.html?"+p);
        return false;
    }
    
    
    //parent.log("Autoloading","hiddenMenuExec");
    mygrid.setXMLAutoLoading("/be3a5/GUI/content/xml/dyngrid.xml");
    //parent.log("loadXML","initGrid");
    mygrid.loadXML("/be3a5/GUI/content/xml/dyngrid.xml?path=1&country="+parent.actualCountry);

}

-----------------------------------

function initTree(){

    tree=new dhtmlXTreeObject('treepanel',"100%","100%",0);
    tree.setImagePath("/be3a5/GUI/content/imgs/tree/");
    tree.setOnClickHandler(openFolder);
    tree.enableDragAndDrop(true);
    
    function openFolder(nodeId){
        parent.log("Clear Grid","openFolder");
        mygrid.clearAll();
        header=true;
        parent.log("loadXML","openFolder");
        mygrid.loadXML("/be3a5/GUI/content/xml/dyngrid.xml?path="+nodeId+"&country="+parent.actualCountry);
    }
        
    //wait cursor while loading data
    tree.attachEvent("onXLS", function(){tree.setItemImage("1_0_"+parent.actualCountry,'wait.gif','wait.gif');return true;});
    tree.attachEvent("onXLE", function(){tree.setItemImage("1_0_"+parent.actualCountry,'folderClosed.gif','folderClosed.gif');return true;});
    
    tree.attachEvent("onDrag", function(src_id,dest_id)
        {
            var p = "SRC="+src_id+"&DST="+dest_id+"&MODE=f2f";
            p += "&SRCNAME="+tree.getItemText(src_id);
            p += "&DSTNAME="+tree.getItemText(dest_id);            
            parent.showPromptDialog("Folder Drag&Drop",400,150,"/be3a5/GUI/content/html/cnt_folderdrag.html?"+p);            
            return false; //it means I have to refresh tree manually!            
        }
    );
    
    
    
    var aTreeMenu=new dhtmlXContextMenuObject('0',0,'');    
    aTreeMenu.setOnShowMenuHandler(openTreeMenu)    
    tree.enableContextMenu(aTreeMenu);
    
    tree.setXMLAutoLoading("/be3a5/GUI/content/xml/dyntree.xml?country="+parent.actualCountry);
    tree.loadXML("/be3a5/GUI/content/xml/dyntree.xml?id=0&country="+parent.actualCountry);

}

--------------------------------
As you can see both drad-and-drop are enabled and the 2 functions mygrid.gridToTreeElement and mygrid.treeToGridElement are defined.

what's wrong?

thanks in advance and regards

In case of drag from grid in tree, processing goes in next way

- tree detects d-n-d event
- tree generate onDrag event
    - if   event returns true
          gridToTreeElement executed
       else
          do nothing

In your case, the onDrag event has custom handler which always return false, in result gridToTreeElement never called.

Now everithing is working fine!

thanks a lot!