Is there a full working example for a jqGrid ColumnChooser? [closed]

by

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.

More Related Contents:

  1. How do I drag multiple elements at once with JavaScript or jQuery?
  2. Customizing the Add/Edit Dialog in jqGrid
  3. Highcharts – Keep tooltip showing on click
  4. Queue AJAX calls
  5. Can I make a not submit a form?
  6. How can I custom-format the Autocomplete plug-in results?
  7. How to reload current page without losing any form data?
  8. Making custom right-click context menus for my web-app
  9. How to create a jQuery plugin with methods?
  10. jQuery UI – Close Dialog When Clicked Outside
  11. jqGrid add new column
  12. animating addClass/removeClass with jQuery
  13. Using jQuery, Restricting File Size Before Uploading
  14. jQuery UI accordion that keeps multiple sections open?
  15. How can I bind to the change event of a textarea in jQuery?
  16. Get query string parameters url values with jQuery / Javascript (querystring)
  17. Using jQuery how to get click coordinates on the target element
  18. jQuery UI Tabs – How to Get Currently Selected Tab Index
  19. jqGrid access cell data while it is being edited
  20. Calling a function on Bootstrap modal open
  21. How to disable tooltip in the browser with jQuery?
  22. How well does jQuery support backward compatibility?
  23. jquery-ui-dialog – How to hook into dialog close event
  24. How to get value from jQuery UI slider?
  25. showing progressbar progress with ajax request
  26. changing text periodically in a span from an array with jquery
  27. AutoComplete in jQuery with dynamically added elements
  28. Differentiate between focus event triggered by keyboard/mouse
  29. Alternative to eval() javascript [duplicate]
  30. How to use jQuery UI with Angular 2

Leave a Comment