GetOrgChart - rendering, updating, drop etc

Question

I have a few questions.

1) How do I update an existing node in terms of its theme/color/appearence? I would be happy to update the config and thereafter redraw the entire chart (but orgChart.draw() does not seem to work).

2) As regards the drag and drop, when enabled the drop on another node does not do anything. Can I make a reference to a function which for instance "moves" the dragged/dropped node to the node on which it was dropped?

3) When drag and drop is enabled, the action buttons (edit node, remove node, add child node) are disabled.

Thanks in advance!

Answer 1

You can use BALKANGraph pluging to achieve requested functionality

1) See the example bellow:

2) and 3) are working without any modifications

            var chart = new OrgChart(document.getElementById("tree"), {
                template: "ana",
                nodeBinding: {
                    field_0: "name",
                    img_0: "img"
                },
                links: [
                    { from: "2", to: "1" },
                    { from: "3", to: "1" }
                ],
                nodes: [
                    { id: "1", name: "Plamen Peshev", img: "//balkangraph.com/js/img/empty-img-blue.svg"  },
                    { id: "2", name: "Ava Field", img: "//balkangraph.com/js/img/empty-img-blue.svg"  },
                    { id: "3", name: "Rhys Harper", img: "//balkangraph.com/js/img/empty-img-blue.svg" }
                ]
            }); 

            document.getElementById("changeTemplate").addEventListener("click", function () {
                chart.config.nodes["1"].tags = ["ula-template"];
                chart.config.tags["ula-template"] = { template: "ula" };
                chart.draw(false);
            });

        html, body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: Helvetica;
        }

        #tree {
            width: 100%;
            height: 100%;
        }

#changeTemplate{
  font-size: 24px;
}

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<button id="changeTemplate">Change the template of node 1</button>
<div id="tree"></div>