jsTree v 3+ : How to pass [Type] information for the 'Types' plugin using the JSON format in making a jsTree?

Question

I want to create a jsTree(v 3.0.2) using the JSON format on "Populating the tree using JSON" given at http://www.jstree.com/docs/json/

// Expected format of the node (there are no required fields)
{
  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

From the instance, I create my tree using:

// create the instance
$('#jstree').jstree({

  "core": {
    "animation": 150,
    "check_callback":true,
    'data': new_data //json object
  },
  "types": {
    "#": {
      "valid_children": ["folder"]
    },
    "folder": {
      "valid_children": ["file"]
    },
    "file": {
      "valid_children": [""]
    }
  },
  "plugins": ["dnd", "search", "wholerow", "types"]
});

I want to make sure that the Folders don't go into other Folders, and the Files don't go into other Files. Files go only in Folders.

I want to know how can I pass "type" information in my json object (new_data), so that the types get applied.

I have been able to get the $("#jstree").jstree("set_type", $(this), "file"); method working, but I do not like the dirty-checking approach. Also, I want the type to be applied IN the JSON , and NOT Externally

Also, I do not want to use the methods to perform a check while dragging-dropping. I want the visual cue (see the screenshot below) to appear when it's ok/not ok to drop an element in another place

Answer 1

For jstree 3.x versions : To answer the first part of your question about how to pass the "type" information in your JSON object, you must declare a type attribute at the same level as the other node attributes like id, text. For example the updated format of the node will now look like this. Notice the addition of the type attribute.

// Expected format of the node (there are no required fields)
{
  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
  type        : "string"
}

A sample node json representation looks like

{"id":"179356","text":"Node Name 1","state": {"opened":false,"disabled":false,"selected":false},"children":true,"li_attr": {"nodeType":"C","itemId":"12345"},"type":"file"}

This issue is also discussed at the link : https://github.com/vakata/jstree/issues/473