I'm attempting to theme a jstree a bit, making the icons fit my needs more appropriately. However, I can't seem to get the types plugin working fully.

Creating the tree:

// Create JSTree
$('#listbox').jstree({
    "types": {
        "#": {
            "valid_children": ["floor", "default"],
        },
        "default": {
            "valid_children": ["default", "floor"],
            "icon": "/WACH%20Graphics/images/building.png"
        },
        "floor": {
            "icon": "/WACH%20Graphics/images/floor.png"
        }
    },
    "plugins": ["search", "wholerow", "types"]
});

My list is actually generated dynamically. But, the structure of the unordered list is similar to below:

<ul>
   <li><a href="building.html">Building 1</a>
      <ul>
          <li rel="floor"><a href="floor.html">Floor1</a></li>
          <li rel="floor"><a href="floor.html">Floor1</a></li>
          <li rel="floor"><a href="floor.html">Floor1</a></li>
      </ul>
   </li>
</ul>

My default icon gets picked up. But my icon for the "floor" type never gets picked up. Instead, everything has the default icon.

This is jstree 3.0.0.

I'm attempting to theme a jstree a bit, making the icons fit my needs more appropriately. However, I can't seem to get the types plugin working fully.

Creating the tree:

// Create JSTree
$('#listbox').jstree({
    "types": {
        "#": {
            "valid_children": ["floor", "default"],
        },
        "default": {
            "valid_children": ["default", "floor"],
            "icon": "/WACH%20Graphics/images/building.png"
        },
        "floor": {
            "icon": "/WACH%20Graphics/images/floor.png"
        }
    },
    "plugins": ["search", "wholerow", "types"]
});

My list is actually generated dynamically. But, the structure of the unordered list is similar to below:

<ul>
   <li><a href="building.html">Building 1</a>
      <ul>
          <li rel="floor"><a href="floor.html">Floor1</a></li>
          <li rel="floor"><a href="floor.html">Floor1</a></li>
          <li rel="floor"><a href="floor.html">Floor1</a></li>
      </ul>
   </li>
</ul>

My default icon gets picked up. But my icon for the "floor" type never gets picked up. Instead, everything has the default icon.

This is jstree 3.0.0.

• javascript
• html
• jstree

1 Answer 1

The answer as given by the JSTree developer on his Github:

The type is not read off of the rel attribute. Try using

<li data-jstree='{ "type" : "floor" }'... 

in your markup (and keep the single quotes outside, and the double quotes - inside for the data-jstree attribute).

See: https://github./vakata/jstree/issues/497

In my case I was just using the types plugin to overwrite the icon. Turns out this can be done by simply giving the list item an data-jstree property with an icon property set.

<li data-jstree='{ "icon" : "icon.png" }'></li>

Hope someone finds this useful in the future :)