Multiselection is a way to select more than one row in the grid so that some action can be performed on all of them at once.

Using Multiselect

Multiselect uses these three properties from the basic grid:

Property	Type	Description	Default
multiselect	boolean	If set to true, an additional column is added on the left side of the grid. This adds 28px to the grid's width. When the grid is constructed the content of this column is filled with a check box element. When we select a row the check box's state becomes checked (unless multiboxonly has been set to true, the row can be clicked anywhere on the row, not just in the checkbox). When we select another row the previous row does not change its state. When we click on a row that is selected, the state becomes unchecked and the row is unselected. (If onRightClickRow has been defined, then right-clicking a row does not select the row).	false
multiboxonly	boolean	If multiboxonly is set to true, then a row is selected only when the checkbox is clicked (Yahoo style).	false
multikey	string	When we want selection to occur only when the user holds down a specific key (when clicking), we define that key here. The possible values are: 'shiftKey', 'altKey', and 'ctrlKey'. For example, multikey: 'altKey' will ensure that multiselection occurs only when the user holds down the "Alt" key.	empty

Example

As seen in the figure above, in the header layer we have a common check box. When we check this box all the rows will be selected. When we uncheck this box, all the rows are unchecked.

Identifying the Selected Rows

To obtain selected rows we can use getGridParam('selarrrow') method. Using our example we can write this

jQuery("#grid_id").getGridParam('selarrrow');

which will return an array with the selected rows (i.e., ["11","9"] from the figure above). The values in array are the id's of the selected rows.

To retrieve a single row, the last one selected, we can use getGridParam(selrow)

jQuery("#grid_id").getGridParam('selrow');

This returns the id of the last selected row as a scalar value.

Dynamically Enabling and Disabling Multiselect

To dynamically disable multiselect:

jQuery("#grid_id").setGridParam({multiselect:false}).hideCol('cb');

to enable multi-select:

jQuery("#grid_id").setGridParam({multiselect:true}).showCol('cb');

Where

• grid_id is to be replaced by the name of your grid, but
  
• cb is a keyword, not to be replaced
  

To make this work, multiselect must be initially set to true in the jqGrid properties; only then can we enable and disable it using the code above.