How to order a diagram context menu?

When the options are as below, I would like to have the order of Custom menu come out first.



contextMenuSettings: {

//Enables the context menu

show: true,

// Defines the custom context menu items

items: [

{

// Text to be displayed

text: "Save",

//Sets the id for the item

id: "save",

//ContextMenu can be visible based on the target in which you open the ContextMenu.

target: ".e-elementcontent",

// Sets the css icons for the item

iconCss: "aim aimcons_condition-d",

items: [

{

// Text to be displayed

text: "Save-2",

//Sets the id for the item

id: "save-2",

//ContextMenu can be visible based on the target in which you open the ContextMenu.

// target: ".e-icons e-repeat",

// Sets the css icons for the item

iconCss: "e-icons e-bullet-5",

},

{

// Text to be displayed

text: "Save3",

//Sets the id for the item

id: "save3",

//ContextMenu can be visible based on the target in which you open the ContextMenu.

// target: ".e-icons e-repeat",

// Sets the css icons for the item

iconCss: "e-icons e-bullet-3",

items: [

{

// Text to be displayed

text: "Save3-2",

//Sets the id for the item

id: "save3-2",

//ContextMenu can be visible based on the target in which you open the ContextMenu.

// target: ".e-icons e-repeat",

// Sets the css icons for the item

iconCss: "e-icons e-bullet-2",

},

{

// Text to be displayed

text: "Save3-3",

//Sets the id for the item

id: "save3-3",

//ContextMenu can be visible based on the target in which you open the ContextMenu.

// target: ".e-icons e-repeat",

// Sets the css icons for the item

iconCss: "e-icons e-bullet-1",

},

],

},

],

},

{

text: "Load",

id: "load",

target: ".e-elementcontent",

iconCss: "e-icons e-repeat",

},

{

text: "Clear",

id: "clear",

target: ".e-elementcontent",

iconCss: "e-icons e-delete-1",

},

],

// Hides the default context menu items

showCustomMenuOnly: false,

},


1 Reply

VG Vivisa Ganesan Syncfusion Team April 17, 2024 06:23 AM UTC

Hi,

To display only the custom menu, set the "showCustomMenuOnly" parameter to true. If you wish to display both the default and custom menus, the default menu items will be ordered first, followed by the custom menu items., that is the default behaviour. Refer the sample below

Sample:

https://stackblitz.com/edit/qweua1-mhz3sc?file=src%2FApp.vue


Regards,

Vivisa


Loader.
Up arrow icon