Displaying an icon within a treenode when mouse hover and hide it when mouse leaves the treenode

Webix JS
1

Hi,

I think the discussion title is self explanatory.


I’ve seen some examples of how to change the template and add icons in the treenode by using:

template:"{common.icon()} {common.folder()}<img src='icons/#image#.png' style='float:right; margin:3px 4px 0px 1px;'> #value#"

But, I would like to do that programmatically.

First of all, I would have to attach the “onMouseMove” and “onMouseOut” events for each tree node:

treenode.attachEvent("onMouseMove", function(id, e, node){
    //display icon
   var htmlcontent=node.getValue();
   node.setValue(htmlContent+ "<img src='icons/image.png'");
});

treenode.attachEvent("onMouseOut", function(id, e, node){
    //hide icon
});

Obviously, “node.getValue()” doesn’t exist, but it’s just to give you an idea of what I would like to accomplish.

  1. Basically, how could I modify inner html of a treenode to add my icon?

Now, I have to browse each element of the tree before rendering it.

Bearing in mind:

getItem: gets the object of the data item with the specified id.

getItemNode: returns html element of item by item id (may return null if target item is not rendered yet).


//tree declaration
$scope.treeconfig = {
     container:"treecontainer",
     view:"tree",
     borderless:true,
     id:'treecorp',
     url:path+"/secured/treecorp",
     select:true
     };
//webix ready(angular js init)
//browse tree and attach events to treenode
$scope.attachMouseEventsToNodes= function(root){
        var tree= $$("treecorp");
        //browse treenodes
        browseTree(tree.getRootNode());
   });
};
function browseTree(treeNode)
{
    for (var i=0; i<tree.getChildren().length; i++)
    {
         var currentNode=tree.getChildren()[i];
         var itemData= tree.getItem(currentNode.id)
         //attach  "onMouseMove" and "onMouseOut" events 
          ...
         if(itemData.hasKids>0)
         {
            browseTree(currentNode);
         }
    }
}

Regarding the “browseTree” function,obviously it wouldn’t work , because the getRootNode() and getChildren() method don’t exists.

So, I have 3 questions:

2) How do I get the root item node of the tree?

3) Is there an existing method that returns a children’s tree node (getChildren?)

4) Is the item ID same as “ID” defined in the data.json

For example if we have:

var data= 
     { id:"root", open:true, value:"Toyota", data:[
     { id:"1.1", value:"Avalon"},
     { id:"1.2", value:"Corolla" },
     { id:"1.3", value:"Camry" }
     ]};
$$("treecorp").getItemNode('root') would return my root node?
//If that's the case, I have the answer to my first question .
  1. Not sure I’m gonna be able to attach event to the treenode since getItemNode may return null if target item is not rendered yet?

Sorry for my long post.

Thanks for your time.

2

To start from - check the next sample.
If you need not change the image dynamically, just show and hide it - this can be done through css, without any js code involved

http://webix.com/snippet/cdba334b

3

(1)

you can use getItemNode to get html element of tree item under cursor, and after that modify the innerHTML of it, or update html element in any necessary way.

(2)

There is a “each” iterator, which will allow to run code against all elements of tree
http://docs.webix.com/api__treestore_each.html

Still instead of working with DOM directly you can use a more high level API.
http://webix.com/snippet/ceebe9f7

4

Thanks a lot!