Question

I have one column in jsTree Grid representing my tree. The second column is used for displaying “tags” associated with each node. It is displaying great until I click another level.

So the second column will create a div and my tags (similar to stack overflow tags) are appended to that html element.

Here is the issue, when the page first loads. I see the root node just fine and the “tags” associated with the root node that I defined in the second column. Looks great!

When I click to expand the root node, to get to the next level. I lose the tags associated with the root node. What I want is to keep them but I can’t figure out why the grid is losing it.

EDIT:

Removed the code and images.

Answer 1

The problem is that the jsTreeGrid plugin redraws the cells when you expand a node. Since you only append your tags during the “loaded” and “select_cell” events, the tags disappear.

You can workaround this by re-appending the tags on more events:

.bind("open_node.jstree create_node.jstree clean_node.jstree change_node.jstree", function (event, data) { 
    doDisplayTags(mapNameTag);
})