Hello Tony,

I uploaded here the current version of columnChooser which I use. It is based on the current version of columnChooser on jqGrid. The changes are following

• variables are defined at the beginning of the functions
• functions are declared before there will be used (for example function call)
• function insert always return a value: return perm; is inserted at the end of the function
• unneeded quotes are removed from all object properties in the code. For example the code opts = $.extend({“width” : 420,…}); are replaced to opts = $.extend({width : 420,…});
• testing for if($.ui) {if ($.ui.multiselect ) {…}} are simplified. Unneeded test for opts.msel === “multiselect” are removed because the same name of multiselect pluging can have another name opts.msel. For example to solve problem with the same name of both jQuery UI Multiselect Widget and another from http://www.erichynds.com/blog/jquery-ui-multiselect-widget one have to use $.widget.bridge and in the case one need use opts.msel with the name other as “multiselect”.
• parameter opts of the function dlog_opts are renamed to options. The variable opts are already used in outer scope. The usage of two different variables having the same name in the same code fragment make the code more complex to read.
• some additional code are added at the end of columnChooser and as resize callback of the function dlog_opts. The code implements resizing of multiselect lists of dialog (from the content of the dialog) on resizing of the main Column Chooser dialog.

Short comment to the resizing code. The original structure of content of the Column Chooser dialog looks like on the picture

If we start from the .ui-dialog-content then

• >div>select – internal hidden select list with the attribute multiple=”multiple”. It will be used internally. It’s hidden and don’t need be resized
• >div>div.ui-multiselect – the div with main information
• >div>div.ui-multiselect>div.selected – the left part of the dialog with the header and the list of visible columns
• >div>div.ui-multiselect>div.available – the right part of the dialog with the header and the list of hidden columns
• >div>div.ui-multiselect>div.selected>div.actions – the header of the list of visible columns
• >div>div.ui-multiselect>div.selected>ul.selected – the list of visible columns
• >div>div.ui-multiselect>div.available>div.actions – the header of the list of hidden columns
• >div>div.ui-multiselect>div.available>ul.available - the list of hidden columns

The code which I added in columnCooser at the end of the method changes CSS inline settings of the most above dives so that there have height: 100%; width: 100%; margin: auto. CSS of the right and the left pains (>div>.ui-multiselect>.selected and >div>.ui-multiselect>.available) will be set to width: 50%; box-sizing: border-box (width value will be calculated based on dividerLocation). After that the most elements of the dialog will be resized automatically correctly. One will just adjust the hight of ul elements (>div>div.ui-multiselect>div.selected>ul.selected and >div>div.ui-multiselect>div.available>ul.available). I did it inside of resize callback of the function dlog_opts.

The demo uses the code of new column chooser. Additionally is demonstrates usage of setColWidth method (see the answer and here). Tony you can include the method in the main code of jqGrid if you want. Additionally the demo demonstrates autosizeColumns function which works slowly, but it allows to set column widths based on the width of maximal content in the column and the column header. The requirement will be frequently asked. Probably the code could help other people.

Best regards
Oleg

P.S. I don’t tested the resizing code in old versions of web browsers. If the tests will show some problems in the browsers I would suggest to add if(old browser) return to skip resizing code. In the way one will have correct resizing in new web browsers and one will have old (non-resizable) Column Chooser dialog in old browsers.

It seems to me that it’s really a bug in jqGrid. I will post later details. As a workaround I suggest to remove

option from editing options. One of the reason of the problem is that jqGrid 4.5.4 (previous version, before 4.6) had the lines 

which are removed from jqGrid 4.6 because of some reasons. So recreateForm option don’t really work in jqGrid 4.6.

An alternative workaround would be to add beforeInitData callback in jQuery.jgrid.edit which would remove the previous created Edit/Add form:

Best regards
Oleg

You still don’t answer on my previous questions:

The code which you posted contains exact the same Add and Edit options. So which problem you have exactly? How you see the differences?

Moreover you used recreateForm: true only for Edit and not for Add options. Setting of jQuery.extend(jQuery.jgrid.edit, {…}); would be more logically to do before navGrid.

Regards
Oleg

First of all you should always post more details about what you do. Which editing mode you use (form editing, inline editing, cell editing) and in which form (inline editing for example can be used by direct call of editRow, by usage inlineNav or by usage of formatter: “actions”).

If you use form editing for example then you can solve your problem probably by adding recreateForm: true option for both Add and Edit options.

Best regards
Oleg

Hi!

You can use some jQuery plugins or jQuery UI Widget to implement your requirement. One initialize the custom control/plugin/widget typically by calling some dataInit callback of searchoptions in the corresponding column of colModel.

Take a look in my old answers, which provides demos using jQuery UI MultiSelect Widget (get here the last version): this one, this one and another one.

Another way will be to use select2 plugin with the option multiple: true. It have another interface, but it can be used to implement multiselect too.

Best regards
Oleg

I posted before the suggestion (see the answer too) which describe how to make columnChooser resizable. The code still work. You can just include the code starting with $.jgrid.extend({columnChooser :function(opts){… from the answer and include the code fragment after jquery.jqGrid.min.js. In the way you will replace the original code of columnChooser with resazable version of it.

@Tony: probably one could do modify the original code of columnChooser  in the way? I use the code in all my grids more as two years and I didn’t found any problem with the modified code which I suggested.

Best regards
Oleg