JsTree Custom Icons with Json_data plugin

Question

I am using a JsTree on an MVC website. I am using the json_data plugin to populate the tree. My Controller action returns a JsonResult using a class I made to represent the nodes. I have been reading the documentation on how to specify a custom icon for a specific node, but I can't seem to get it right. It seems to suggest that data should be an object that contains title and icon strings, but this stopped the tree from loading when I tried it. The class structure I am using at the moment is as follows.

public class NodeModel
{
    public string data;
    public NodeAttribute attr;
    public string state = "closed";
    public string icon = "default/file.png";
}

public class ParentNodeModel : NodeModel
{
    public List<NodeModel> children;
}

public class NodeAttribute
{
    public string id;
    public string type;
}

Does anyone know what format the json data should look like to give each node an individual icon? I would like to avoid using the types plugin if possible.

Resolved

Changing my class structure to make the data string into a new object was actually the correct format. But with the new structure another part of my code was crashing (fixed now). So the classes will now look like this

public class NodeModel
{
    public NodeData data;
    public NodeAttribute attr;
    public string state = "closed";
}

public class NodeData
{
    public string title;
    public string icon = "path/file.png";
}

Answer 1

Seems that your objects defined correctly. From jsTree documentation:

if icon contains a slash / it is treated as a file, used for background. otherwise - it is added as a class to the "ins" node

I assume that "default/file.png" has been added as the CSS class to the "ins" node, so maybe slash '/' should be the first symbol, try to set the icon value as "/default/file.png".

Also you can check how we're using jsTree in our project :

• controller (method LoadCategoryTree)
• view