2

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

kmk
  • 613
  • 9
  • 22

2 Answers2

5

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 1
    Thanks Oleg. This is perfect. – kmk May 04 '12 at 11:44
  • Which javascript plugins are required for this ? – Bhavik Ambani Jul 20 '12 at 09:36
  • @BhavikAmbani: the directory `plugins` of jqGrid contains `ui.multiselect.css` and `ui.multiselect.js` wich are required. Moreover the jQuery UI is required too. – Oleg Jul 20 '12 at 11:03
  • I used the same but now it is not showing proper way. It is showing very big columns and not multiple options, Please provide a sample code with complete functionality if you have. – Bhavik Ambani Jul 20 '12 at 11:13
  • @BhavikAmbani: The reference to [the demo](http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithColumnChooser8.htm) you will find in my answer. – Oleg Jul 20 '12 at 12:27
  • @Oleg I want to change the page size of info Page where the selected row is displayed, how can i do that ? – Bhavik Ambani Jul 20 '12 at 13:02
  • @BhavikAmbani: Sorry, but I don't understand what you mean. What is "page size" in the `columnChooser` dialog? What you mean under the "info Page"? – Oleg Jul 20 '12 at 20:24
  • @Oleg info page means in `JQgrid` the tag which we are using for showing the row in the popup page. Now I want to change the `height` and `width` parameter of that info page. – Bhavik Ambani Jul 21 '12 at 16:43
  • @Oleg what if I want to make some of the columns only selected at the time of loading the page for the selectable columns. – Bhavik Ambani Jul 30 '12 at 07:26
  • @BhavikAmbani: `columnChooser` selects automatically the visible columns. I'm not understand what additional columns you want select. In my answer I shown some examples how you can use jQuery UI Sortable events to add custom behavior in `columnChooser`. You can implement other events to implement any other behaviors which you need. – Oleg Jul 30 '12 at 10:05
1

I am using the below code in JqGrid for column chooser plug-in. when i tick the select All check box in the grid. I want to exclude particular column ( by default it should not display in my grid).
I used hidden=True property in col model. buy i want to handle these in column chooser also.

function Properties_Columnchooser() {
    $('#btn_setColumns').click(function () {
        jQuery('#grid-tableProperties').jqGrid('columnChooser',{
        "shrinkToFit" : true,
        "autowidth" : true,
        done : function(perm) {
            w = $(window).width();
            // alert('done ' + w);
            if (perm) 
               {
                this.jqGrid("remapColumns", perm, true);
                 this.setGridWidth(w - 30, true);

                $('.ui-search-input').show();
            } 
             else 
            {
            }
        }
    }
);
    });
}
SaravanaKumar T
  • 105
  • 1
  • 5