<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
...
contextMenuSettings: { enableContextMenu: true, contextMenuItems: [], customContextMenuItems: [{ id: 'id', text: "Description" }, { id: 'Text', text: "Edit Item" }], subContextMenu: [{ contextMenuItem: "Text", subMenu: ["OrderID", "CustomerID", "EmployeeID"] }] },
columns: [
...
],
contextOpen: function (args) {
var context = this._conmenu.element;
context.find(".e-customitem a").css('display', 'none');//invisible all custom contextmenu
if (args.headerText == "Employee ID" || args.headerText == "OrderID")
$(context.find(".e-customitem:contains('Description') a")).css("display", "block");
else
$(context.find(".e-customitem:contains('Edit Item') a")).css("display", "block");
}
});
});
</script> |
Hi,
Thank you for your answer.
The use case you solved isn't the one I asked about.
It is an interesting solution though. I will be keeping it aside in case I need it at a later time.
About my question, the solution is quite simple it turns out.
The use case is the following:
Regards,
Raouf
<body>
<button id="btn" onclick="myFunc()">Click to change the user identity</button>
<div id="Grid"></div>
<script type="text/javascript">
var flag;
$(function () {
$("#Grid").ejGrid({
...
contextMenuSettings: { enableContextMenu: true, contextMenuItems: [], customContextMenuItems: [{ id: 'id', text: "Description" }, { id: 'Text', text: "Edit Item" }], subContextMenu: [{ contextMenuItem: "Text", subMenu: ["OrderID", "CustomerID", "EmployeeID"] }] },
columns: [
...
],
contextOpen: function (args) {
var context = this._conmenu.element;
context.find(".e-customitem a").css('display', 'none');//invisible all custom contextmenu
if (ej.isNullOrUndefined(flag)) { //process will takes place initially
if (args.rowData[0].EmployeeID <= 5) //visible only if the element has e-rowcell
$(context.find(".e-customitem:contains('Description') a")).css("display", "block");
else
$(context.find(".e-customitem:contains('Edit Item') a")).css("display", "block");
}
if (!ej.isNullOrUndefined(flag)) { //procees will takes place after clicking button.
if (args.rowData[0].EmployeeID > flag)
$(context.find(".e-customitem:contains('Description') a")).css("display", "block");
else
$(context.find(".e-customitem:contains('Edit Item') a")).css("display", "block");
}
}
});
});
</script>
<script>
function myFunc() {
flag = 6
}
</script>
</body>
</html>
|
Hi Manisankar Durai,
Again, thank you for your answer. But, It doesn't exactly solve my problem for the following two reasons :
Regards,
Raouf
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
...
contextMenuSettings: { enableContextMenu: true, contextMenuItems: [], customContextMenuItems: [{ id: 'id', text: "Description" }, { id: 'Text', text: "Edit Item" }], subContextMenu: [{ contextMenuItem: "Text", subMenu: ["OrderID", "CustomerID", "EmployeeID"] }] },
columns: [
...
],
create: function (args) {
var obj = $("#Grid_Context").ejMenu("instance");
obj.model.beforeOpen = "beforeopen"; // use beforeopen event to add the item before context menu renders
},
});
});
</script>
<script>
function beforeopen(args) {
if (parseInt(args.target.textContent) < 5) {
$("#Grid_Context").find("#More").remove();
if (this.element.find(".e-list:contains('More')").length == 0)
this.insert([{ id: "More", text: "More" }], "#Grid_Context"); //use insert method to add the item in context menu
}
else
this.element.find(".e-list:contains('More')").css("display", "none");
}
</script> |
Hi Manisankar Durai,
That's about it.
Thank you for your help.
Regards,
Raouf Ben Hassine