Search results

How to modify the parent child relationship in organization chart interactively and set tooltip for organization chart nodes

14 Oct 2021 / 1 minute to read

You can modify the parent child relationship in an organization chart interactively using the drop event.

Step1

To modify the parent child relationship in an organization chart, use the following code snippet to create connection and layout interactively.

Copied to clipboard
<template>
    <div id="app">
        <ejs-diagram id="diagram"></ejs-diagram>
    </div>
</template>
Copied to clipboard
export default {
    name: 'app',
    data() {
        return {
            // ...
            // ...
            //Setting tooltip constraints
            constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
            nodes: nodes,
            tooltip: {
                //Setting the content for the tooltip
                content: 'Nodes',
                //Positioning the tooltip
                position: 'TopLeft'
            }
            // ...
            // ...
        }
    }
}
        let diagram = this.$refs.diagram.ej2Instances;
        diagram.drop = (args) => {
        // ...
        // ...
        //Adding conectors and configuring the source and target
        diagram.add({ id: 'connector', sourceID: (args.element).id, targetID: (args.target).id });
        //Apllying layout
        diagram.doLayout();
        // ...
        // ...
    };