We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

js ejdiagram custom contextMenu

Thread ID:

Created:

Updated:

Platform:

Replies:

120895 Oct 26,2015 07:30 AM Mar 19,2017 11:54 PM JavaScript 8
loading
Tags: ejDiagram
hamidR
Asked On October 26, 2015 07:30 AM

Hello,
I am working on contextmenu for ejdiagram. but not work Matching to Bellow Link:
http://help.syncfusion.com/js/api/ejdiagram#members:contextmenu
Thanks

Shyam G [Syncfusion]
Replied On October 27, 2015 05:41 AM

Hi Hamid,

We have created a JSplayground to achieve your requirement. Please refer to the below JSplayground link and the code example. We have not refreshed our documentation online. We will refresh it with our volume 3 service pack 1 release, which is scheduled to be released by the end of October, 2015.

JSPlayground link: http://jsplayground.syncfusion.com/jdguesgq

Code example:



<script type="text/javascript">

        $("#diagram").ejDiagram({

            //enable the context menu in the diagram 

            enableContextMenu: true, 

            contextMenu: {

                // define the custom context menu items. 

                items: [

                {

                    // name of the context menu item 

                    name: "zoom",

                    // Text to be displayed  

                    text: "Zoom",

                },

                ],

                // hide the default context menu items. 

                showCustomMenuItemsOnly: true

            },

            contextMenuBeforeOpen: function (args) {

                //do your custom action here. 

            },

            contextMenuClick: function (args) {


                        //do your custom action here. 

 

                }

            }

        });
</script>

Regards,
Shyam G


Robert Mims
Replied On March 10, 2017 01:02 PM

Picking up this, noticed it in the attached playground fiddle and in my development too:

http://jsplayground.syncfusion.com/p1e5c4tm

The custom context menu icons are always the same, regardless of whether you set the css, style, etc.

Example

The customization doesn't appear to be quite as flexible as the Toolbar or Radial Menu (where you could declare an un-ordered list definition and point to that element.) I'm considering using a radial menu or vertical toolbar and intercepting the context menu activation to get around that myself. If we could specify the ul-li structure externally and point to a target element for the context menu, that would definitely make it more powerful for customization.

Shyam G [Syncfusion]
Replied On March 13, 2017 12:37 AM

Hi Robert, 

Please set imageUrl property in the context menu items to achieve your requirement. To customize an image, please use cssClass property. Please refer to the code example, sample and help documentation below 

Code example: 

<style> 
        .menuplace{ 
            background-size:14px 14px; 
        } 
    </style> 

$("#diagram").ejDiagram({ 
 
        contextMenu: { 
            // Defines the custom context menu items 
            items: [{ 
                name: "zoom", 
                // Text to be displayed 
                text: "Zoom", 
                                   //set an imageUrl 
                imageUrl: "Images/zoom_icon.png", 
                                   //define a cssClass 
                cssClass:"menuplace", 
                  
            }], 
 
        } 
    }); 


Regards, 
Shyam G 


Shyam G [Syncfusion]
Replied On March 13, 2017 12:38 AM

Hi Robert, 

Please ignore our previous update. 

Please set imageUrl property in the context menu items to achieve your requirement. To customize an image, please use cssClass property. Please refer to the code example, sample and help documentation below 

Code example: 

<style> 
        .menuplace{ 
            background-size:14px 14px; 
        } 
    </style> 

$("#diagram").ejDiagram({ 
 
        contextMenu: { 
            // Defines the custom context menu items 
            items: [{ 
                name: "zoom", 
                // Text to be displayed 
                text: "Zoom", 
                                   //set an imageUrl 
                imageUrl: "Images/zoom_icon.png", 
                                   //define a cssClass 
                cssClass:"menuplace", 
                  
            }], 
 
        } 
    }); 



Regards, 
Shyam G 


Robert Mims
Replied On March 13, 2017 03:16 PM

Thank  you, Shyam.

In the playground example I set one to null and in the others, did not specify an image. I'll set them explicitly, but I would suggest that an image shouldn't be defined by default, rather, only shown/assigned when the provided configuration indicates.

Easy enough to workaround though, thank you.

Shyam G [Syncfusion]
Replied On March 14, 2017 08:06 AM

Hi Robert, 

By default, the custom context menu items will be rendered with the default image. You can hide the image using cssClass property. Please refer to the code example and JSPlayground link. 

Code example: 
  <style> 
        .menuplace { 
            background-image:none; 
            visibility:hidden; 
        } 
        
    </style> 
$("#diagram").ejDiagram({ 
            contextMenu: { 
                // define the custom context menu items.  
                items: [ 
                { 
                    . . . 
                    cssClass: "menuplace", 
                }] 
            } 
        }); 


Regards, 
Shyam G 


Robert Mims
Replied On March 17, 2017 09:13 AM

Perfect, I was just getting back to this today and thought I'd check the thread to remind myself where I was at - and this recommendation will be a great solution.

Thank you, Shyam.

Shyam G [Syncfusion]
Replied On March 19, 2017 11:54 PM

Hi Robert, 
Please let us know if you need further assistance on this. 
Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;