js ejdiagram custom contextMenu

[hamidR]

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]

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]

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.

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]

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", 

                  

            }], 

 

        } 

    }); 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/imageUrlsample-1580762855 

Regards, 

Shyam G 

[Shyam G]

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", 

                  

            }], 

 

        } 

    }); 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/imageUrlsample-1580762855 

Help documentation:https://help.syncfusion.com/js/diagram/contextmenu#customize-context-menu 

Regards, 

Shyam G 

[Robert Mims]

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]

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", 

                }] 

            } 

        }); 

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

Regards, 

Shyam G 

[Robert Mims]

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]

Hi Robert, 

Please let us know if you need further assistance on this. 

Regards, 

Shyam G