How do I persuade JqGrid columnChooser to use the correct interface?

Question

On the demo website for jqGrid, the columnChooser module is displayed like this:

It allows you to both reorder the columns and select which columns are to be shown.

Unfortunately when I enter this section of code into my application(The code that is suppose to make this appear exactly as portrayed):

jQuery("#colch").jqGrid('navButtonAdd','#pcolch',
                        { caption: "Columns",
                          title: "Reorder Columns",
                          onClickButton : function (){
                              jQuery("#colch").jqGrid('columnChooser');
                          } 
                        // ...

It displays a column chooser; however, it only allows you to choose which columns to display and not the order the appear. One other noticeable difference is that the interface looks nothing like the above, it is simply a list of columns that you either select or de-select, by control click to select them one at a time or shift-click to select in bulk.

Here is a link to the demo site, to use as a reference. http://trirand.com/blog/jqgrid/jqgrid.html

Answer 1

The problem which you have is well-known. The Column Chooser feature is described here http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#column_chooser and it is an example of integration of jqGrid with other foreign components. There are exist a jQuery UI widget (Plug-in) Mulitselect (see http://plugins.jquery.com/project/Multiselect, http://quasipartikel.at/multiselect/ and http://github.com/michael/multiselect/) which consist mostly from two files:

• ui.multiselect.css
• ui.multiselect.js

If you carefully read http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#column_chooser you will find information about this external files.

So to be able to use the Column Chooser feature like you see on demo page you need do following (together to standard steps):

• include ui.multiselect.css stylesheet
• include jQuery UI JavaScript file like jquery-ui.min.js and not only a css (like jquery-ui-1.8.2.custom.css) which need jqGrid
• include ui.multiselect.js

If you download jqGrid from http://www.trirand.com/blog/?page_id=6 you have to select "Quiery UI addons". The files ui.multiselect.css and ui.multiselect.js you will find in the subdirectories src\css and src of the downloaded ZIP file.

Optional additional localization files for the Mulitselect widget you can download from http://quasipartikel.at/multiselect/ or http://github.com/michael/multiselect/.