Hover/ mouse over / out

[bridgji]

Your control has been working great for me.

I'm using it in a product relating to esri map. I have a list of parcels in your control. I am able to execute actions when the user clicks the label or the related checkbox. I'd like to be able to execute an action that highlights the related parcel if the user hovers over the item in the list. It doesn't look like I can currently tie to the items mouse actions like I can the click or check events. I'm relatively green when it comes to this level of JavaScript so I may be just missing how to add my own event. If this not currently possible is it could I get this added to your list of future enhancements.

Thanks again.

Jim

[pjekel]

Jim,

Even though the tree has events like mouseOver and mouseOut they are at a very high level in the DOM, as a result you would get multiple events just moving your mouse.

However, you can use the dojo/on selector() method to select event related to tree nodes. Try the following example:

require([
    "dojo/on",
    "dojo/touch",
    "dojo/query",
    "dijit/registry", 
         ...
], function (on, touch, query, register, ... ) {

   var tree = new Tree({ ... });

    on(tree.containerNode, on.selector(".dijitTreeNode", touch.enter), function(evt){
        var node = registry.byNode(this);
        console.log("enter : " + node.item.name);
    }),
    on(tree.containerNode, on.selector(".dijitTreeNode", touch.leave), function(evt){
        var node = registry.byNode(this);
        console.log("leave : " + node.item.name);
    }),

}

And for some additional bedtime reading, checkout:

http://dojotoolkit.org/reference-guide/1.9/dojo/on.html#dojo-on

Hope this helps.

[bridgji]

This looks like what I need. I'm having a little trouble implementing it. NewTree.containerNode is null and I'm getting Unable to get property 'on' of undefined or null reference . Do I need to set the ContinerNode to something manually?

//var items = SelectedStore.query({ "type": selectedlayer, selected: true }); var originalTree = dijit.byId('ActiveTree'); if (originalTree != undefined) { originalTree.destroy(); } if (ActiveModel != undefined) { ActiveModel.destroy(); } var mySortOptions = {sort: [ { property: "id", descending: true, ignoreCase: true }

    ]};

    ActiveModel = new ForestStoreModel({
        store: ActiveStore,
        labelAttr: "ActiveName",
        checkedAttr: "selected",
        query: { "id": parentid },
        rootId: "Selected",
        labelClass: "image",
        name: "image",
        options: { sort: mySortOptions }
    });

    var newTree = new Tree({
        id: "ActiveTree",
        classname: "ActiveTree",
        model: ActiveModel,
        betweenThreshold: 5,
        valueToIconMap: { "icon": { "*": "* maki" }, feature: { attributes: { type: "image" } } },
        autoExpand: true,
        clickEventCheckBox: false,
        showRoot: false

    },"ActiveSet2");

// newTree.placeAt("ActiveSet2"); newTree.on("Click", ActiveClick); newTree.on("checkBoxClick", checkBoxClicked);

    newTree.startup();

    on(newTree.containerNode, on.selector(".dijitTreeNode", touch.enter), function (evt) {
        var node = registry.byNode(this);
        console.log("enter : " + node.item.name);
    }),
 on(newTree.containerNode, on.selector(".dijitTreeNode", touch.leave), function (evt) {
     var node = registry.byNode(this);
     console.log("leave : " + node.item.name);
 }),

[pjekel]

If tree property containerNode is undefined you probably are using dojo 1.8. If that is the case replace containerNode with domNode.

[bridgji]

That was what was going on. Thanks again for all your help.

[pjekel]

BTW: I noticed the following in you tree:

 valueToIconMap: { "icon": { "*": "* maki" }, feature: { attributes: { type: "image" } } }

You probably intended:

 valueToIconMap: { "icon": { "*": "* maki" }, "feature.attributes.type": {"image": <mappedValue> }  }