11

At http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods there are instructions for building a jqGrid column chooser ('dlog_opts is either an option object to be passed to “dlog”, or (more likely) a function that creates the options object. The default produces a suitable options object for ui.dialog'), but not complete working code; no example is provided of the function that is required.

Is there a complete working example for building a jqGrid column chooser that will allow hiding, showing, and moving columns?

Christos Hayward
  • 5,365
  • 15
  • 52
  • 104

1 Answers1

19

Look at the old example from the answer. The example is mostly about another subject, but in the navigator bar you can see the "column chooser" button. Clicking on the button display column chooser dialog. You can drag any column name from the dialog and drop it on another location to change the column order. You can click on "-" to hide the column and drag any column from the list of hidden columns and drop it on in the list of visible columns.

To reproduce the behavior you should first be sure that during jqGrid downloading you have "jQuery UI addons" (grid.jqueryui.js) selected. Then you should follows the steps:

  1. include ui.multiselect.css from the plugins subdirectory of jqGrid 4.0 source.

  2. include jQuery UI jquery-ui.min.js (not only jquery-ui.css needed typically for jqGrid)

  3. include ui.multiselect.js after the jquery-ui.min.js

  4. add new button which call the column chooser

The code can be like the following

var grid = $('#list');
grid.jqGrid ('navButtonAdd', '#pager',
             { caption: "", buttonicon: "ui-icon-calculator",
               title: "Choose Columns",
               onClickButton: function() {
                    grid.jqGrid('columnChooser');
               }
             });

UPDATED: The answer contains description of some additional customization of columnChooser based on my suggestion.

Community
  • 1
  • 1
Oleg
  • 217,934
  • 30
  • 386
  • 757
  • Accepted and upvoted. (Thanks!) – Christos Hayward May 05 '11 at 17:23
  • @JonathanHayward: You are welcome! – Oleg May 05 '11 at 17:39
  • I can't thank you enough!!! This saved me hours of useless work. – FastTrack Mar 12 '12 at 19:24
  • 1
    @FastTrack: You are welcome! It you "play" now with the columnCooser another [my suggestion](http://www.trirand.com/blog/?page_id=393/bugs/making-columnchooser-really-resizable/#p25823) could be also interesting for you. The suggestion are not yet included in the main code of jqGrid. – Oleg Mar 12 '12 at 20:50
  • @Oleg: WOW! That's great. I'm going to implement those changes in my grid installation. I'm assuming that will help with things such as this: [link](http://www.trirand.com/jqgridwiki/lib/exe/fetch.php?media=wiki:columnchooser.jpg) Notice how the 'Add All' link is pushed down a line, as opposed to your nice-looking example. – FastTrack Mar 12 '12 at 22:25
  • @FastTrack: Exactly! it's one from the first changes which I implemented in the suggestion. Originally the suggestion was started with [the answer](http://stackoverflow.com/a/8988347/315935) and then with [this one](http://stackoverflow.com/a/8994809/315935). – Oleg Mar 12 '12 at 22:50
  • @Oleg: I managed to get your changes working on my jQGrid installation. Looks great! One question though, how can I get the darker overlay to show up (just like it does when a modal popup appears) when the column chooser popup appears? Let me know if you would like me to create a separate question for this! – FastTrack Mar 13 '12 at 14:21
  • @Oleg: Also, if you have any other suggestions or helpful additions such as this one, PLEASE let me know. You're such a valuable resource with jQGrid! – FastTrack Mar 13 '12 at 14:33
  • @FastTrack: Thank you! [The demo](http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithColumnChooser5.htm) from [the answer](http://stackoverflow.com/a/8988347/315935) do exactly what you need, if I understand your last question correctly. – Oleg Mar 13 '12 at 14:34
  • @Oleg: Notice how when you click the Search button, a darker overlay appears behind the modal popup. However, this doesn't appear when you click the Column Chooser button. I'm assuming I will need to show the overlay div on the click event for my Column Chooser button? – FastTrack Mar 13 '12 at 14:50
  • 1
    @FastTrack: OK, now I understand what you mean. The solution is very easy. You can use `$(this).jqGrid('columnChooser', {modal: true});`. Because the option `modal` is not documented now (see [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#options)) it would be probably better to post the question as the separate question and I will write you the answer. In the way we share the solution with other. I think, that the question can be interesting to other users. – Oleg Mar 13 '12 at 15:29
  • @Oleg: Here is a [link](http://stackoverflow.com/questions/9687201/jqgrid-column-chooser-modal-overlay) to the new question. Thanks! – FastTrack Mar 13 '12 at 15:38
  • @FastTrack: OK! I just answered your question. – Oleg Mar 13 '12 at 17:27