I got back into my project and found I think the simplest solution
(function ($) {
function buildMenu(target) {
const state = $(target).data("datagrid");
if (!state.columnMenu) {
state.columnMenu = $("<div></div>").appendTo("body");
state.columnMenu.menu({
onClick: function (item) {
if (item.iconCls == "tree-checkbox1") {
$(target).datagrid("hideColumn", item.name);
$(this).menu("setIcon", {
target: item.target,
iconCls: "tree-checkbox0"
});
} else {
$(target).datagrid("showColumn", item.name);
$(this).menu("setIcon", {
target: item.target,
iconCls: "tree-checkbox1"
});
}
$(state.columnMenu).show(); // HERE
}
})
const fields = $(target).datagrid("getColumnFields", true).concat($(target).datagrid("getColumnFields", false));
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
var col = $(target).datagrid("getColumnOption", field);
if (col.hidden) {
state.columnMenu.menu("appendItem", {
text: col.title,
name: field,
iconCls: "tree-checkbox0"
});
} else {
state.columnMenu.menu("appendItem", {
text: col.title,
name: field,
iconCls: "tree-checkbox1"
});
}
}
}
return state.columnMenu;
}
$.extend($.fn.datagrid.methods, {
columnMenu: function (jq) {
return buildMenu(jq[0]);
}
});
})(jQuery);