Question

My problem is whenever I left click a dynatree node then right click another dynatree node to display my context menu the node which was left clicked remains highlighted in blue so I end up with two nodes in blue. If I then right click successive nodes the highlighting works correctly but the left clicked node remains highlighted.

The left click processing clears the previous node on mouseup. I initiate context menu processing via

document.oncontextmenu=contextMenu 

which is also called on mouse up.

I have tried to capture the right button mouseup event and make the context menu node active thinking that would change the state of the left clickked node but not so.

$("#tree").mouseup(function(e){
   if(e.button == 2){
      e.target.setActive();// right mouse up
  }     
}); 

How should I get the last left clicked node to unhighlight when another node is right clicked ? It does not look right to have two nodes highlighted at once. I have noticed the dynatree context menu demo does not unhighlight the previously left clicked node when another node is right clicked so is this by design ?? Can you get around it ?

Thanks,
Al

Answer 1

OK this works

In my myfile.js after I create the dynatree I added:

var dtnode;   //dynatree node Global <--ADDED
var elem;     //DOM node Global  <--ADDED


Function BuildTree()


//ADDED following code after the dynatree was loaded 

$("#tree").mouseup(function(e){
if(e.button == 2){ //RIGHT MOUSE UP 
    if(!(elem == null)){
        var elem2 = e.currentTarget.document.activeElement;
        dtnode = tree.getDtNodeFromElement2(elem);
        dtnode.deactivate();
        elem = null;
        }   
}else{//LEFT MOUSE UP
    if(!(elem == null)){
        elem = null;
    }
    elem = e.currentTarget.document.activeElement;  
}   
}); 

//In jquery.dynatree.js
//$Version: 1.1.1$
//$Revision: 481, 2011-03-02 07:25:35$

//The following changes were made:

getSelectedNodes: function() {
    return this.tree.getSelectedNodes();
},

// AFTER THE ABOVE FUNCTION THE FOLLOWING FUNCTION WAS ADDED

getDtNodeFromElement2: function() {
    return this.tree.getDtNodeFromElement2();
},

//********************************************************

getSelectedNodes: function(stopOnParents) {
    var nodeList = [];
    this.tnRoot.visit(function(node){
    if( node.bSelected ) {
        nodeList.push(node);
        if( stopOnParents === true ){
           return "skip"; // stop processing this branch
        }
    }
});
return nodeList;
},

// AFTER THE ABOVE FUNCTION THE FOLLOWING FUNCTION WAS ADDED 

getDtNodeFromElement2: function(elem) {
    var sourceNode = getDtNodeFromElement(elem);
    return sourceNode;
},

Summary:
By keeping track of the last element to be left clicked and exposing the dynatree getDtNodeFromElement method through getDtNodeFromElement2 it is possible to call the deactivate method on the last left clicked node whenever the first right click of a node occurs. This eliminates simultaneous highlighting of tree nodes.