Documentation v8.0.28

Preview Purchase

jsTree is jquery plugin, that provides interactive trees. For more info please visit the plugin's Homeor Github Repo.

Contextual Menu

Here's a jsTree example with a contextual menu. For more info, please visit the official website.

JAVASCRIPT
HTML

$("#kt_docs_jstree_contextual").jstree({
    "core" : {
        "themes" : {
            "responsive": false
        },
        // so that create works
        "check_callback" : true,
        'data': [{
                "text": "Parent Node",
                "children": [{
                    "text": "Initially selected",
                    "state": {
                        "selected": true
                    }
                }, {
                    "text": "Custom Icon",
                    "icon": "flaticon2-hourglass-1 text-danger"
                }, {
                    "text": "Initially open",
                    "icon" : "fa fa-folder text-success",
                    "state": {
                        "opened": true
                    },
                    "children": [
                        {"text": "Another node", "icon" : "fa fa-file text-waring"}
                    ]
                }, {
                    "text": "Another Custom Icon",
                    "icon": "flaticon2-drop text-waring"
                }, {
                    "text": "Disabled Node",
                    "icon": "fa fa-check text-success",
                    "state": {
                        "disabled": true
                    }
                }, {
                    "text": "Sub Nodes",
                    "icon": "fa fa-folder text-danger",
                    "children": [
                        {"text": "Item 1", "icon" : "fa fa-file text-waring"},
                        {"text": "Item 2", "icon" : "fa fa-file text-success"},
                        {"text": "Item 3", "icon" : "fa fa-file text-default"},
                        {"text": "Item 4", "icon" : "fa fa-file text-danger"},
                        {"text": "Item 5", "icon" : "fa fa-file text-info"}
                    ]
                }]
            },
            "Another Node"
        ]
    },
    "types" : {
        "default" : {
            "icon" : "fa fa-folder text-primary"
        },
        "file" : {
            "icon" : "fa fa-file  text-primary"
        }
    },
    "state" : { "key" : "demo2" },
    "plugins" : [ "contextmenu", "state", "types" ]
});

<div id="kt_docs_jstree_contextual"></div>

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.28

Contextual Menu

Explore Metronic

Metronic Licenses

Metronic Demos

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.28

No result found

Contextual Menu

Explore Metronic

Metronic Licenses

Metronic Demos