How to add custom properties to node/connectors and access it at runtime or client side events

23 Jun 2022 / 2 minutes to read

You can add custom properties for the nodes or connectors using the addinfo property.

Step1

The following code snippet are used to add custom properties for the nodes/connectors:

//adding custom properties through addInfo
let addInfo = { Designation: 'manager' };

//Assinging the defined custom property to the node
 let nodes = [{
     // ...
    // ...
    //Adding custom properties
    addInfo: addInfo,
    // ...
    // ...
    }
    // Text(label) added to the node
}]

Step2

After adding the custom property, you can access it during runtime. In the following code snippet, the custom property have been accessed using the client-side events.

// Selection change event definition
function selectionChange(args) {
    if (args.state === 'Changing') {
        if (args.newValue.length > 0) {
          alert("The Added custom property is:" + (args.newValue[0].addInfo).Designation);
        }
    }
}

// ...
// ...
    // Invoking selection change event
    export default {
    name: 'app',
    data() {
        return {
            // ...
            // ...
            selectionChange: selectionChange,
            // ...
            // ...
        }
    },
}
// ...
// ...

The below sample shows adding custom properties to the node/connectors and accessing it during runtime.

Source

Preview

app.vue

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :selectionChange='selectionChange' ></ejs-diagram>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { DiagramPlugin,ISelectionChangeEventArgs } from '@syncfusion/ej2-vue-diagrams';


function selectionChange(args) {
    if (args.state === 'Changing') {
        if (args.newValue.length > 0) {
          alert("The Added custom property is:" + (args.newValue[0].addInfo).Designation);
        }
    }
}

    Vue.use(DiagramPlugin);
    let addInfo = { Designation: 'manager' };
    let nodes = [{
    //Adding custom properties
    addInfo: addInfo,
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    annotations: [{ id: 'label1', content: 'Click me'}],
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Text(label) added to the node
}]

export default {
    name: 'app',
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
            selectionChange: selectionChange,
        }
    },
}
</script>
<style>
    @import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Contents

Step1
Step2

Contents

Step1
Step2