javascript - Add Remove Column Handler on jqGrid ColumnChooser

Question

I'm using the jqGrid columnChooser, like so:

    jQuery(grid).jqGrid(
        'navButtonAdd',
        pagerDiv,
        {
            caption: "Columns",
            buttonicon: "ui-icon-newwin",
            title: "Hide/Show Columns",
            onClickButton: function () {
                $(this).jqGrid('columnChooser', {
                    done: function (perm) {
                        if (perm) {
                            $(this).jqGrid('remapColumns', perm, true);
                        }
                    },
                    modal: true,
                    width: 400,
                    height: 300,
                    classname: 'column-chooser-select'
                });
            }
        }
    );

and was wondering if there was a way to specify an event handler on the columnChooser (using the jQuery UI Multiselect plugin that comes w/ jqGrid) that fires any time a column is either added or removed. So I guess it's a two-part question:

1. does the jQuery UI Multiselect support such a thing?
2. if so, is there a way to hook it up without altering the jqGrid source?

A bit of background on what I'm trying to achieve:

My default grid configuration hides many columns. Some of these columns are not populated from the db - they are obscure, rarely used data elements that if populated would dramatically decrease the query execution performance (multiple joins involving tables with 100 million plus records).

Should a user pick one of these columns for display i'd like to warn them that another roundtrip to the server is required and it could take a while - and give them the option to cancel the column addition.

Thanks

Answer 1

I think I understand your problem and find your question interesting, so I wrote the demo for you which shows how one can solve the problem.

columnChooser uses jQuery UI Multiselect plugin internally which uses jQuery UI Sortable. So I suggest to use sortreceive event of the jQuery UI Sortable to catch the information needed.

The code can be the following

$("#grid").jqGrid('navButtonAdd', '#pager', {
    caption: "",
    buttonicon: "ui-icon-calculator",
    title: "Choose columns",
    onClickButton: function () {
        $(this).jqGrid('columnChooser');
        $("#colchooser_" + $.jgrid.jqID(this.id) + " ul.selected")
            .bind("sortreceive", function (event, ui) {
                alert('column "' + ui.item.text() + '" is choosed');
            });
        $("#colchooser_" + $.jgrid.jqID(this.id) + " ul.available a.action")
            .click(function () {
                alert('column "' + $(this).parent().text() + '" is choosed');
            });

    }
});

See the demo here.

The code bind 'click' event on the "+" for the initial list of the columns which was in the column chooser at the initialization time of the dialog. I think it would be sufficient for you. If needed you can easy modify the code to support the 'click' on the "+" for the columns which will be removed from the left list during the work with the columnChooser.

I almost forget to mention that I used in the demo improved version of the columnChooser (see the answer), but my above suggestion works with the original version of columnChooser too.