Title: Context Menu on DataGrid + showColumn / hideColumn
Post by: rezzonico on April 02, 2021, 01:13:54 AM
Hi
I have added a "Context Menu on DataGrid" in order to show/hide columns as descibed in the demo.
I have the following question:
Is it possible to avoid that the "Context Menu" closes after selecting/unselecting a checkbox ?
The idea is that the user selects/unselects the columns in one step.
Regards
Miche
Title: Re: Context Menu on DataGrid + showColumn / hideColumn
Post by: Wojak on April 05, 2023, 12:49:34 PM
Have you got the solution for "Is it possible to avoid that the "Context Menu" closes after selecting/unselecting a checkbox ?" ?
Title: Re: Context Menu on DataGrid + showColumn / hideColumn
Post by: Wojak on May 18, 2023, 10:27:11 AM
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);
|