This is an old revision of the document!


Description

Display a modal window where the user can select which column to show and hide.

Author

Piotr Roznicki

Installation

In order to use this module you should mark the Set Columns plugin (in Other modules) when you download the grid. For more information refer to Download.
For Developers - this is the grid.setcolumns.js in the src directory.

Calling Convention

Usually you can attach a click event to a button. You can use this method in navigator using the navButtonAdd method

jQuery("#mybutton").click(function() {
   jQuery("#grid_id").setColumns(options);
   return false;
});

Where:

  • mybutton is the id of a button element (can be any other valid HTMl element)
  • grid_id is the already constructed grid
  • options is an array of name: value pairs, including any of the following:

 Show/ hide columns

This method uses the following options from language file

$.jgrid = {
...
	col : {
		caption: "Show/Hide Columns",
		bSubmit: "Submit",
		bCancel: "Cancel"
	},
...
OptionDescriptionDefault
topthe initial top position of the modal dialog. The zero value mean that the coordinate will be calculated from top left position of the grid and does not have effect if jqModal option is false0
leftthe initial left position of the modal dialog. The zero value mean that the coordinate will be calculated from top left position of the grid and does not have effect if jqModal option is false0
widththe width of the modal dialog200
heightthe height of the modal dialogauto
dataheightThis parameter control the scrolling content. The height parameter control the height of the entry modal, dataheight parameter control the height of the scrolling content keeping the buttons at the footer visibleauto
modalsets dialog in modal mode. Also does not have effect is jqModal is falsefalse
dragthe dialog is dragable. In order to work this either the jqDnR.js plugin should be included when you download the grid or the dragable component from jQuery UI should be usedtrue
beforeShowForma function that fires before showing the modal dialog (parameter is the id of the form)null
afterShowForma function that fires after showing the modal dialog (parameter is the id of the form)null
afterSubmitForma function that fire after the submit button is clicked (parameter is the id of the form)null
closeOnEscape determines if the modal can be closed if the user press ESC keytrue
ShrinkToFitIf set to true the grid width re size (fit) according to the visible columnsfalse
jqModal If set to true the method try to use the jqModal plugin for the modal dialogsfalse
colnameview If set to false the names from colModel will not be displayedtrue
closeAfterSubmitIf set to false the dialog will not be closed if the user press Submit buttontrue
onCloseThe event raised when a close icon is clicked, a cancel button is clicked or ESC key is pressed (if this is enabled). The function can return true or false. In case of false the dialog will not be closednull
saveiconThis is array element with the following default values [true,“left”,“ui-icon-disk”].
The item set various settings for the submit button. The first item enables the icon, the second item tells where to put icon left or right, the third item corresponds to valid ui icon from UI theme roller
closeiconThis is array element with the following default values [true,“left”,“ui-icon-close”].
The item set various settings for the close button. The first item enables the icon, the second item tells where to put icon left or right, the third item corresponds to valid ui icon from UI theme roller
updateAfterCheckWhen set to true the column is shown/hidden immediately upon clicking the checkbox. Choosing this options hides the submit button.false
recreateFormwhen set to true the form is recreated every time the dialog is activeted with the new options from colModel (if they are changed)false
To prevent showing or hiding columns that the developer does not want to show at all, a new option has been added to colModel: hidedlg (default false). If set to true this column will not appear in the modal dialog.

Discussion

Gonzalo Saloma, 2010/06/05 04:53

First of all, thank you guys for the great job developing jqGrid and the show-hide-columns add-on. I have detected the following problem: jqGrid works fine with any type of column name (that I have tried at least), but the show-hide-column functionality has restrictions for uncommon characters like square brackets, pipes, etc. Because of the way I handle things in php, I need to use column names like user[item], user[quantity], etc. Is it possible to fix this or could you recommend a way around it? Thanks in advance, GS

Félix Tousignant, 2010/09/01 14:57

Hello All,

Thanks for the nice module. Is there a way to retrieve the status (hidden or not) after closing the column selector form? I need to remember the user preference, so I'd like to do a ajax call to save the column status. Thanks ! Feliccio

Chuck Fennimore, 2010/11/02 15:09

I am trying to save the list of shown and hidden columns and would like to do that here on the Show/Hide Columns screen by showing a “Save” button/icon and attaching a function that would pop up a dialog so that the user could enter a name for the saved column configuration. I can easily get the list of columns but I have not been able to add the Save button/icon to the Show/Hide Columns. Thanks, Chuck

Alexander Schmitz, 2010/11/23 01:00, 2010/11/23 01:00

I was trying to use the function options: beforeShowForm, afterShowForm, … But they do not seem to work at all.

E.g.

$('#jqgrid').jqGrid( 'columnChooser', { beforeShowForm: function (id) { alert('beforeShowForm'); } } );

You could leave a comment if you were logged in.

QR Code
QR Code wiki:show_hide_columns (generated for current page)