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.

Context menu styling / close event

Thread ID:

Created:

Updated:

Platform:

Replies:

132406 Aug 30,2017 11:06 PM Sep 11,2017 05:38 AM JavaScript 5
loading
Tags: ejTreeGrid
Jay Faulkner
Asked On August 30, 2017 11:06 PM

Hello,

I have several questions about the context menu of the ejTreeGrid:

1. Is there any way to customize the styling for the context menu, such as font size and color, background color, borders, etc.?

2. Is there a way to inject custom HTML, perhaps using Angular (I'm using Javascript and Angular 1.#)?

3. Is there an event that is called when a mouse click outside the context menu results in it closing?  I would like to know when the context menu is going away, so I can perform an action even when I do not click on the menu.

I also have an issue due to the fact that the right click on the context menu results in both contextMenuOpen and rowSelecting/rowSelected events.  With a row selection, I need to request and wait on some data from a server.  That data (essentially several boolean flags) needs to be used to indicate whether an associated item should be added to the context menu.  However, the context menu pops up before the server data gets updated, so it shows the wrong menu items.  I need to delay the opening of the context menu until I have the appropriate data, and I also need to be able to reset data if the menu closes due to a mouse click somewhere outside the menu.  I can just use the menu item callbacks if the menu is clicked on.  Hope you can help.  Thanks!

Jay

Jonesherine Stephen [Syncfusion]
Replied On August 31, 2017 08:41 AM

Hi Jay, 
Thanks for contacting Syncfusion support 
Query1: Is there any way to customize the styling for the context menu, such as font size and color, background color, borders, etc.? 
Solution: We have prepared the sample and customized the Tree Grid context menu. Please find the code example below: 
<style> 
        #TreeGridContainer_ContextMenu, #TreeGridContainer_SubContextMenuAdd { 
            color: red; 
            background-color: antiquewhite; 
            font-size: 10px; 
        } 
        .e-icon { 
            font-size: 10px; 
        } 
</style> 
  
Query2:  Is there a way to inject custom HTML, perhaps using Angular (I'm using Javascript and Angular 1. #)? 
Solution: In TreeGrid we can’t able to load custom HTML but we can render custom menu items and also we can append custom icons using “contextMenuOpen” client side event. 
Please find the code example below: 
<div id="TreeGridContainer" style="height:400px;width:100%"></div> 
  <script type="text/javascript"> 
      $(function () { 
            $("#TreeGridContainer").ejTreeGrid({ 
                contextMenuSettings: { 
                    showContextMenu: true, 
                    contextMenuItems: ["add", "edit", "delete"] 
                },                 
                contextMenuOpen: contextMenuOpen, 
            }); 
        }); 
        function contextMenuOpen(args) { 
            //To append custom context menu 
            var isExpandable = true, isCollapsable = true, data; 
            data = args.item; 
            if (data && data.hasChildRecords) { 
                if (data.expanded) 
                    isExpandable = false; 
                else 
                    isCollapsable = false; 
            } else { 
                isExpandable = false; 
                isCollapsable = false; 
            } 
            if (data) { 
                var contextMenuItems = [{ 
                    headerText: "Expand", 
                    menuId: "Expand", 
                    eventHandler: customMenuExpandCollapseHandler, 
                    iconClass: "e-expandIcon", 
                    disable: !isExpandable 
                }, 
                 { 
                     headerText: "Collapse", 
                     menuId: "Collapse", 
                     eventHandler: customMenuExpandCollapseHandler, 
                     iconClass: "e-collapseIcon", 
                     disable: !isCollapsable 
                 } 
                ]; 
                args.contextMenuItems.push.apply(args.contextMenuItems, contextMenuItems); 
            } 
        } 
  
        function customMenuExpandCollapseHandler(args) { 
            //click handler for custom menu 
            var currentMenuId = args.menuId, expandCollapseArgs = {}; 
            expandCollapseArgs.data = args.data; 
            if (currentMenuId === "Expand") 
                expandCollapseArgs.expanded = true; 
            else 
                expandCollapseArgs.expanded = false; 
            ej.TreeGrid.sendExpandCollapseRequest(this, expandCollapseArgs); 
        } 
Please refer the below documentation for further reference 
  
Query3:  Is there an event that is called when a mouse click outside the context menu results in it closing?  I would like to know when the context menu is going away, so I can perform an action even when I do not click on the menu. 
Solution: We have prepared the workaround and triggered “recordClick” event for context menu close action. 
Please find the code example below: 
var contextClose = false;          
$("#TreeGridContainer").ejTreeGrid({                 
                recordClick: function (args) { 
                    if (contextClose) { 
                        //we can perform custom actions during context menu close 
                        alert("contextMenu closed"); 
                        contextClose = false; 
                    } 
                }, 
                contextMenuOpen: contextMenuOpen, 
            }); 
        $(document).on('click', '#TreeGridContainer_ContextMenu', function () { 
                //To update the flag value on context menu click 
                contextClose = false; 
            }); 
        $(document).on('click', '#TreeGridContainer_SubContextMenuAdd', function () { 
                //To update the flag value on  sub context menu click 
                contextClose = false; 
            });         
function contextMenuOpen(args) { 
             //To update the flag on context menu open 
            contextClose = true; 
        }     
 We have also prepared the sample based on this. Please find the sample from below location 
  
Query4: I also have an issue due to the fact that the right click on the context menu results in both contextMenuOpen and rowSelecting/rowSelected events.  With a row selection, I need to request and wait on some data from a server.  That data (essentially several boolean flags) needs to be used to indicate whether an associated item should be added to the context menu.   
Solution: Due to asynchronous data call the context menu pops up before the server gets updated. Can you please set the synchronous call while loading context menu with server side data. 
Please find the code example below: 
$.ajax({ 
                async: false, 
                // ... 
                success: function(result) { 
                    // 
                } 
            }) 
 
Regards, 
Jone sherine P S 


Jay Faulkner
Replied On September 7, 2017 10:13 PM

Thank you for the quick response, that helped me through most of my issues.  I'm still having an issue with styling though.  I'm doing the following (see below) to remove the default rows from the context menu and add my own.  I am able to affect the text and background color, but the resulting html elements have explicit styles set for font size.  So, no matter what class overrides I use, the font size cannot be overridden. The context menu element I get for "Add..." is this span element: <span style="font-size:12px;padding:5px;">Add...</span>  Is there an easy way to get rid of this embedded style so that I can set the font-size to something larger than 12px?

function treeGridCallback_ContextMenuOpen( args ){

     args.contextMenuItems.splice(0, 2); // To remove standard context menu items

     args.contextMenuItems.push({

headerText: "Add...",

menuId: "add",

iconPath: "url(" + MyCtrl.addIcon + ")",

iconClass: "myIconAdd",

eventHandler: function addClicked(args) {

console.log( "treeGridCallback_ContextMenuOpen: Add clicked." );

}

});

}


Suriyaprasanth Ravikumar [Syncfusion]
Replied On September 8, 2017 08:32 AM

Hi Jay,  
 
We can customize the context menu elements by override the CSS class applied to TreeGrid context menu. 
We have prepared the sample and customized the font size, color and background color of context menu, please find the code example below:  
 
function contextMenuOpen(args) { 
            //.. 
            if (data) { 
 
                args.contextMenuItems.splice(0, 2); // To remove standard context menu items 
 
                args.contextMenuItems.push({ 
 
                    headerText: "Add...", 
 
                    menuId: "add", 
 
                    iconPath: "url(themes/common-images/reports/plus.png)", 
 
                    iconClass: "myIconAdd", 
 
                    eventHandler: function addClicked(args) { 
 
                        alert("treeGridCallback_ContextMenuOpen: Add clicked."); 
 
                    } 
                }); 
            } 
        } 
 
<style> 
         
         /*Class to override style to context menu div*/ 
        #TreeGridContainer_ContextMenu, #TreeGridContainer_SubContextMenuAdd { 
            background-color: antiquewhite; 
        } 
 
        /*Class to override style to context menu icon*/ 
        .e-contextmenu-icon{ 
            font-size: 15px; 
        } 
 
        /*Class to override style to context menu image*/ 
        .e-contextmenu-image{ 
            background-position: center; 
            background-size: 14px; 
        } 
 
        /*Class to override style to context menu Text*/ 
        .e-contextmenu-label span { 
            color: red; 
            font-size: 15px; 
         } 
 
    </style> 
 
Please find the sample location below. 
Please let us know, if you require any other assistance. 
Thanks, 
Suriyaprasanth R. 


Jay Faulkner
Replied On September 8, 2017 01:54 PM

Thanks, but that still does not work because the CSS classes cannot override the explicit style getting inserted into the HTML elements by, I assume, Syncfusion.  It does work in the sample you provided, but the code I have does not for some reason.  Below is the HTML generated from my code cut from the debugger in Chrome Version 60.0.3112.113 (Official Build) (64-bit):

<div class="e-contextmenu" id="TreeGridContainer_ContextMenu" style="display: table; position: absolute; z-index: 100000; left: 600px; top: 143px; height: auto;">

<ul class="e-treegrid-contextmenu" data-icon="false" type="none" data-role="list-divider" style="margin: 0px; padding-left: 0px;">

<li style="list-style-type:none;margin:0px;">

<div class="e-menuitem e-contextmenu-mouseover" id="add" style="cursor: pointer; min-width: 100px; width: 136.444px;">

<div class="e-icon e-treegridicon" style="display:inline-block;margin-left:7px;position:relative;top:0px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAAZiS0dEACcAowApEy4zPgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wCHA4XJY0+sGgAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAAYBJREFUKM+tkj1Lw1AUht9catJKPvwo6qBtJ4sobo0iuDm5CvkLxb0/o7t/oQRcnerWQbIXP8BCcNCWmNT0tvGmzb1OhmorgviOLzw853AO8MdI34vtq52aYeiWvmRUJslkNBoM229vof1welufC25dFourK3l7eXXZlCQJ8SgGACiqAp5wBK+B8+p71tOZ6wJA5hNUM6qtqZoZD2PElME5uQEAmM1DyKoCTdVMFr7bAA4AgABAoVGq5eRFk084Yspm9okpA59w5ORFs9Ao1VJQUGHljOxcaBrOGVkIKqx01CRMdnki0vGmM90dtY6RhMluahyzMahHfz0B9SjGbIzUKDK8Hbh+xWwezpimu8D1ITK8nRqJTuzA9RH1ox9tUT9C4PogOrFTsFft1olOnE7rcS4c9SN0Wo8gOnF61W79yx21smYN7gf2w/W9aWwuYc/fh4BA766L8DmEsq44WlmzBgjnv1z+Yq3GXt4t1mUVaUEayStyW9nI2t55r47/yAfU6rPJ6kRkGAAAAABJRU5ErkJggg==);background-repeat:no-repeat;"></div>

<div style="display:inline-block;padding:5px;position:relative;top:-2px;">

<span style="font-size:12px;padding:5px;">Add...</span>

</div>

</div>

</li>

</ul

</div>


And here is the code generated from your sample (note that I changed contextMenuItems: ["add", "edit", "delete"] to contextMenuItems: [] to match what I have):


<div class="e-contextmenu" id="TreeGridContainer_ContextMenu" style="display: table; position: absolute; z-index: 1; left: 224px; top: 75px; height: auto;">

<ul class="e-treegrid-contextmenu" data-icon="false" data-role="list-divider" style="margin: 0px; padding-left: 0px; list-style-type: none;">

<li style="list-style-type:none;margin:0px;">

<div class="e-menuitem e-contextmenu-mouseover" id="add" style="display: table; cursor: pointer; min-width: 100px; width: 104px;">

<div class="e-icon e-contextmenu-image" style="background-image:url(themes/common-images/reports/plus.png);background-repeat:no-repeat;"></div>

<div class="e-contextmenu-label">

<span>Add...</span>

</div>

</div>

</li>

</ul>

</div>


Notice that my code has elements with an explicit style="..." specified, in particular the span for the label and the containing div, when yours uses class="e-contextmenu-label".  Is there some explanation for this?  We are using Syncfusion 15.1.0.41 if that helps.


Suriyaprasanth Ravikumar [Syncfusion]
Replied On September 11, 2017 05:38 AM

Hi Jay, 
We regret for the inconvenience caused. 
In TreeGrid, we had removed the inline style for context menu elements and provided  separate classes for easy customize in our volume 2, 2017 main release version 15.2.0.40. You are using any earlier version (15.1.0.41) than 15.2.0.40, hence you can’t able to customize the font size, color and background color of context menu from our provided response. 
Please upgrade to the version 15.2.0.40 or above and then try the response as we provided before. 
 
We are glad to announce that our Essential Studio 2017 Volume-3 SP–1 Release v15.3.0.29 is rolled out and is available for download under the following link:                     
 
Please let us know if you require further assistance on this. 
 
Thanks, 
Suriyaprasanth R. 


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.

;