Context Menu on DataGrid + showColumn / hideColumn

[rezzonico]

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

[Wojak]

Have you got the solution for "Is it possible to avoid that the "Context Menu" closes after selecting/unselecting a checkbox ?" ?

[Wojak]

I got back into my project and found I think the simplest solution 

Code:

(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);