DynaTree has two highlighted nodes on right click after left click

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.

Answer 2

I need to add a short method I added to jquery.dynatree.js to make it work.

//--- Class members ------------------------------------------------------------

DynaTree.prototype = {
// Constructor
// member functions


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

Answer 3

I know this is old, but I just ran into the same problem. When manually trying to manage 'dynatree-active' classes on nodes to force highlighting, I was having issues with multiple nodes being selected. By using a left click along with the right click, dynatree managed all of the selecting and deselecting active nodes.

$("#tree").mouseup(function(e){
        if(e.button == 2) e.target.click();
}); 

I struggled with this one for a bit, I hope it can save someone some pain.

Answer 4

One more change I found while clicking around the display

Instead of

}else{//LEFT MOUSE UP
    if(!(elem == null)){
        elem = null;
    }
    elem = e.currentTarget.document.activeElement;  
}   

use

}else{//LEFT MOUSE UP
    if(!(elem == null)){
        elem = null;
    }
    elem = e.currentTarget.document.activeElement;
    if(elem.tagName != 'A'){
        elem = e.target;
    }  
}  

This corrects a issue where the old highlighting problem reappears of a non A element is clicked.

Al