Using jqgrid's columnchooser with Eric Hynd's multiselect

Question

I'm quite the beginner in jQuery and I'm trying to get a simple columnChooser to work for jqGrid. I'm using jqGrid's navigation bar to insert an "Add/remove columns" button, and on the click event of this button I display the column chooser. Having loaded the multiselect plugin before, it uses it to display the columns with checkboxes.

Here is my code:

$("#myGrid")
    .jqGrid({
        ...
        toppager: true,
        pager: jQuery('#myPager'),
        ...
    })
    .jqGrid('navGrid', "#myPager", { //add the navigator (defaults to the bottom of the grid)
        edit: false, add: false, del: false, search: false, refresh: false, //remove all default buttons
        cloneToTop: true //clone it, so a new one is created on top of the grid (name of the clone is <id of grid>_toppager)
    })
    .jqGrid('navButtonAdd', "#myGrid_toppager", { //add a custom button to the cloned navigator
        caption: "show/hide columns",
        onClickButton: function () {
            var colChooser = $("#colchooser_myGrid");
            if (colChooser.length == 0) {
                $("#myGrid").jqGrid('columnChooser', {
                    width: 260,
                    height: 220,
                    classname: "column-chooser",
                    msel_opts: {
                        autoOpen: true,
                        header: false,
                        height: "auto",
                        classes: "column-chooser" },
                    dlog_opts: { modal: true, resizable: false }
                });
            }
            else {
                // ??
            }
        }
    });

And my CSS:

.column-chooser .ui-multiselect-checkboxes {
    overflow-y: hidden;
}

I am stuck with three things:

the buttons (OK and Cancel) are not visible. I don't find them anywhere on the inner html code. When I remove the options, they appear, but the multiselect does not resize to fit the columnChooser dialog.
how do I get the multiselect to be "unclosable"? I tried adding beforeclose: function () { return false; } in the msel_opts object, and it works, but then the multiselect values stay visible always, even when closing the dialog.
the dialog only displays once, then refuse tho whow up again. It seems it's because it has been created, but it seems the jqGrid calls destroy on both the dialog and the multiselect, so I cannot show them again.

I am using jquery 1.4.4, jquery-ui 1.8.18, jqgrid 4.3.1 and multiselect 1.12, all tested under Firefox 11.

score 2 · Accepted Answer · answered Nov 27 '12 at 16:22

Here's the code I ended up writing to add a column chooser to a grid:

var navButton = {
    caption: window.Constants.Grid.ShowHideColumns,
    onClickButton: function () {
        $(context.grid).jqGrid('columnChooser', {
            width: 260,
            height: 280,
            classname: "column-chooser",
            msel_opts: { //multiselect options
                autoOpen: true,
                header: false,
                height: "auto",
                classes: "column-chooser",
                beforeclose: function () { return false; } //keep multiselect drop down open  
            },
            dlog_opts: { //dialog options
                modal: false,
                resizable: false,
                draggable: false,
                dialogClass: "column-chooser",
                buttons: [
                    {
                        text: window.Constants.Dialog.OK,
                        click: function() {
                            var colModel = $(context.grid).jqGrid("getGridParam", "colModel");
                            $(".column-chooser .ui-multiselect-checkboxes li input[type=checkbox]").each(function () {
                                var colName = colModel[parseInt($(this).val(), 10)].name;
                                $(this).attr("checked") ? $(context.grid).showCol(colName) : $(context.grid).hideCol(colName);
                            });
                            $(this).dialog("close");
                        }
                    },
                    { text: window.Constants.Dialog.Cancel, click: function () { $(this).dialog("close"); } }
                ],
                close: function () {
                    $(".column-chooser").remove(); //remove all elements
                    PopupBox.hideFullOverlay();
                }
            }
        });

        PopupBox.showFullOverlay();
    }
};

var pager = $(context.grid).jqGrid("getGridParam", "pager");
$(context.grid)
    .jqGrid("navGrid", pager, { edit: false, add: false, del: false, search: false, refresh: false, cloneToTop: true }) //add a nav grid to the pager and top pager
    .jqGrid("navButtonAdd", pager, navButton) //add column button to pager
    .jqGrid("navButtonAdd", context.grid + "_toppager", navButton); //add column button to top pager

So in this code context.grid is the id of the grid, and this code gets called after the creation of the grid (i.e. after a line looking like $(context.grid).jqGrid({ /* insert colmodel, pager name, etc */ }))

Here is what is being done against all of my issues:

OK and Cancel buttons not visible: specified the buttons in the options
getting the multiselect to be unclosable: leave the return false in beforeclose, but remove the select from the page with the close element in dlog_opts. Somehow the select stays in the page (as child to the root node).
Solving the fact that the chooser didn't show twice: same thing. Remove all elements when the dialog is closed.

I do this by setting the same class on every created object (the multiselect, the chooser, the dialog). When I'm done using it, I remove everything from my html using this class.

The root problem is that jqGrid doesn't create a proper html hierarchy for the elements, probably because of the way the multiselect plugin works (it hides the select element and creates an ul list next to it containing the checkboxes). In the end, I find myself with 3 divs, one containing the dialog, one containing the ul and one containing the select, all direct children of the body element. When closing, jqGrid leaves the select element, and that breaks it the second time I open the chooser.

score 1 · Answer 2 · edited May 23 '17 at 10:08

Some time before I posted the suggestion which I made after the answering on the answer. In the answer I suggested just replace original jqGrid columnChooser with my modification with respect of $.jgrid.extend({columnChooser : function(opts) {...}});.

In the case you will be able to use beforeClose callback of jQuery UI Dialog. You will be able to use beforeClose too:

$grid.jqGrid('navButtonAdd', '#myGrid_toppager', {
    caption: "show/hide columns",
    //buttonicon: "ui-icon-calculator",
    //title: "Choose columns",
    onClickButton: function () {
        $(this).jqGrid('columnChooser', {
            dialog_opts: {
                beforeClose: function () {
                    return confirm("Do you want to close the dialog?");
                }
            }
        });
    }
});

Small problem is that the current implementation columnChooser of the click event handler on the "Cancel" button don't call beforeClose. You can fix the problem easy if you modify the corresponding part of the code

buttons[opts.bCancel] = function(event) {
    opts.cleanup(true);
};

to

buttons[opts.bCancel] = function(event) {
    if (false === $(this).data("dialog")._trigger('beforeClose', event)) {
        return;
    }
    opts.cleanup(true);
};

See the demo. You will see that the code confirm("Do you want to close the dialog?") from beforeClose will be executed.

Using jqgrid's columnchooser with Eric Hynd's multiselect

2 Answers2