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.
Syncfusion Feedback

js ejdiagram custom contextMenu

Thread ID:

Created:

Updated:

Platform:

Replies:

120895 Oct 26,2015 11:30 AM UTC Mar 20,2017 03:54 AM UTC JavaScript 8
loading
Tags: ejDiagram
hamidR
Asked On October 26, 2015 11:30 AM UTC

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 09:41 AM UTC

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 06:02 PM UTC

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 04:37 AM UTC

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 04:38 AM UTC

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 07:16 PM UTC

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 12:06 PM UTC

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 01:13 PM UTC

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 20, 2017 03:54 AM UTC

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.

Warning Icon 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.Close Icon

;