Modifying relationship interactively in Vue Diagram component

16 Mar 20232 minutes 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.

<template>
    <div id="app">
        <ejs-diagram id="diagram"></ejs-diagram>
    </div>
</template>

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();
        // ...
        // ...
    };