Search results

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

14 Oct 2021 / 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:

Copied to clipboard
//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.

Copied to clipboard
// 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
Copied to clipboard
<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
Contents