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.
| <style> #TreeGridContainer_ContextMenu, #TreeGridContainer_SubContextMenuAdd { color: red; background-color: antiquewhite; font-size: 10px; } .e-icon { font-size: 10px; } </style> |
| <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); } |
| 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; } |
| $.ajax({ async: false, // ... success: function(result) { // } }) |
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." );
}
});
}
| 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> |
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.
