Search results

How to show/hide the context menu items based on the node

14 Oct 2021 / 3 minutes to read

In the diagram, you can create the customized context menu. Refer to the contextmenu for further references.

Step1

To add the [customized context menu] (./context-menu#), define the customized context menu as shown as follows.

Copied to clipboard
<template>
    <div id="app">
        <ejs-diagram id="diagram">
        </ejs-diagram>
    </div>
</template>
Copied to clipboard
//Defining customized context menu
contextMenuSettings: {
    show: true,
    items: [{
        text: 'Apple',
        id: 'apple',
    },
    {
        text: 'Carrot',
        id: 'carrot'
    }
    ],
    // Hides the default context menu items and shows only the custom menu
    showCustomMenuOnly: true,
};

Step2

To load separate customized menu for each nodes, define the hidden ID of the context menu as shown as follows.

Copied to clipboard
    // ...
    // ...
    // Defining the hidden Id for hiding the unwanted context menu item and displays the needed one
    let hiddenId = [];
        hiddenId = ['apple', 'carrot'];
    // ...
    // ...
    let diagram = this.$refs.diagram.ej2Instances
    if (diagram.selectedItems.nodes.length) {
        //From the hiddenId getting the needed context menu items
            if (diagram.selectedItems.nodes[0].id === "Fruit") {
                hiddenId.splice(hiddenId.indexOf('apple'),1);
                // ...
                // ...
            }
                // ...
                // ...
    }
    args.hiddenItems = hiddenId;

Refer to the following code sample for creating customized context menu with hiding the context menu item option.

Source
Preview
app.vue
Copied to clipboard
<template>
    <div id="app">
        <ejs-diagram id="diagram"  :width='width' :height='height' :nodes='nodes' :contextMenuSettings='contextMenuSettings' :contextMenuOpen="contextMenuOpen"></ejs-diagram>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { DiagramPlugin,DiagramContextMenu,Diagram,DiagramBeforeMenuOpenEventArgs } from '@syncfusion/ej2-vue-diagrams';
    Diagram.Inject(DiagramContextMenu);
    Vue.use(DiagramPlugin);

    let nodes = [{
            id: 'Fruit', width: 100, height: 100, offsetX: 300, offsetY: 300, shape: {type: 'Basic', shape: 'Ellipse'}, style: {fill:  '#6BA5D7', strokeColor: 'white'},
            annotations: [{ id: 'label1', content: 'Fruits' }]
        },
        {
            id: 'Vegetable', width: 100, height: 100, offsetX: 200, offsetY: 200, shape: {type: 'Basic', shape: 'Ellipse'}, style: {fill:  '#6BA5D7', strokeColor: 'white'},
            annotations: [{ id: 'label2', content: 'Vegetables' }]
        }
];

function contextMenuOpen(args) {
    let hiddenId = [];
    let obj = document.getElementById("diagram");
    let diagram = obj.ej2_instances[0];
    if (args.element.className !== 'e-menu-parent e-ul ') {
        hiddenId = ['apple', 'carrot', 'orange', 'radish', 'mango', 'cabbage'];
    }
    if (diagram.selectedItems.nodes.length) {
            if (diagram.selectedItems.nodes[0].id === "Fruit") {
                hiddenId.splice(hiddenId.indexOf('apple'),1);
                hiddenId.splice(hiddenId.indexOf('orange'),1);
                hiddenId.splice(hiddenId.indexOf('mango'),1);
            }

            if (diagram.selectedItems.nodes[0].id === "Vegetable") {
                hiddenId.splice(hiddenId.indexOf('carrot'),1);
                hiddenId.splice(hiddenId.indexOf('radish'),1);
                hiddenId.splice(hiddenId.indexOf('cabbage'),1);
            }
    }
    args.hiddenItems = hiddenId;
}

export default {
    name: 'app',
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
            contextMenuOpen: contextMenuOpen,
            contextMenuSettings: {
        //Enables the context menu
        show: true,
        // Defines the custom context menu items
        items: [{
        text: 'Apple',
        id: 'apple',
    },
    {
        text: 'Carrot',
        id: 'carrot'
    },
    {
        text: 'Orange',
        id: 'orange'
    },
    {
        text: 'Radish',
        id: 'radish'
    },
    {
        text: 'Mango',
        id: 'mango'
    },
    {
        text: 'Cabbage',
        id: 'cabbage'
    }
    ],
    // Hides the default context menu items
    showCustomMenuOnly: true,
    }
        }
    }
}


</script>
<style>
    @import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Contents
Contents