Icons on Fancytree

[ckaymowski]

I'm currently making some experiments with fancytree. (Evaluating it to possible replace jsTree as our currently used Tree component). Our tree for example has different icons on every single node. The icon for the node is contained in its data. I can't currently find a way of either setting an icon in the nodes data or implementing a "onNodeRender" callback myself. Is there a way so solve this that i did not think of?

[mar10]

You can set custom icons in various ways.

I fixed the sample here:

    http://wwwendt.de/tech/fancytree/demo/sample-theming.html

[elisabe...@gmail.com]

Thanks Martin I needed this too :)

[pmasel...@gmail.com]

I'm migrating to fancytree from dynatree, and what I'm missing is `classNames` config option. I found this option easiest for setting icons for whole tree.

It seems to me awkward to do some jQuery in renderNode instead of just setting it.

Note: Tree is initialized from array. Setting node.icon is not an option as data comes from server and is auto wired to tree.

[mar10]

You are looking for 'extraClasses':

http://www.wwwendt.de/tech/fancytree/doc/jsdoc/global.html#NodeData

[pmasel...@gmail.com]

But I would have to set it on my data and it does not allow setting icon class, but only wrapping span class.

Currently I patched fancytree source and changed hardcoded ''fancytree-icon" into opts.classNames.nodeIcon in nodeRenderTitle. However it is also used in getEventTarget and I don't know how to access opts there.

So I can now set icon just once on init:

var tree = $('#myId').fancytree({
    classNames: {
        nodeIcon: 'icon-16-folder'
    }
});

W dniu środa, 30 stycznia 2013 11:34:40 UTC+1 użytkownik ckaymowski napisał:

[mar10]

This option was renamed to 'extraClasses'.

(When using the `<ul><li>` syntax to initialize, you can simply set custom class names, that will be added to the greeted markup)

HTH

Martin

[lanni...@gmail.com]

The problem with the extraClasses option, as was mentioned, is that it adds an icon to the left of the icon that is called out in the glyph map. In other words, it places an additional icon in the node <span> that wraps the mapped glyph icon. I fixed this by creating a class .icon-use-wrap { margin-left:-12px !important; } and set this as the icon in the glyph map. So the mapped icon is blank, but then it slides left so there isn't an ugly space where the blank would be.