This grid example uses the ui-grid-selection directive to row selection. To enable, you must include the 'ui.grid.selection' module and you must include the ui-grid-selection directive on your grid element.

Uses the gridOptions.onRegisterApi callback to register the rowSelectionChanged event and log when the row is selected. By default the selection feature will divide selection changes into batch events and single events, there are two different events provided in the api. By setting enableSelectionBatchEvent: false you can cause it to instead just call the single event in a loop - which may be useful if you're doing client rather than server side processing of the changes.

By default the module will provide a row header with checkboxes that allow selection of individual rows. If you set the enableRowHeaderSelection gridOption to false, then the row header is hidden and a click on the row will result in selection of that row. You can see that in this tutorial for grid1 by looking at your javascript console.

If you want to allow both clicking on the row, and also clicking on the rowHeader, you can set enableFullRowSelection to true.

Setting the multiSelect gridOption to true will allow selecting multiple rows, setting to false will allow selection of only one row at a time.

If you have multiSelect: false, then an additional option noUnselect will mean that a row is always selected. You can select a different row (which will unselect the current row), but you cannot manually unselect the current row by clicking on it. This means that at least one row is always selected, other than when you first open the grid. If necessary you could programatically select the first row upon page open. The second grid demonstrates this.

If multiSelect: true, another option modifierKeysToMultiSelect may be used. If set to true this will allow selecting multiple rows only if the Ctrl-Key, Cmd-Key (Mac) or the Shift-Key is used when selecting, if set to false then it allows selecting multiple rows by individually clicking them.

By default a selectAll box is shown at the top of the rowHeader. If multiSelect: true is set then this will allow you to select all visible rows. Note that the selectAll does not watch for new data, so if you are using the selectAll function and you add data to the grid, you need to check grid.api.selection.getSelectAllState, and if it is currently ticked, then manually call grid.api.selection.selectAllVisibleRows after your data has been added.

The selectAll box can be disabled by setting enableSelectAll to false.

You can set the selection row header column width by setting 'selectionRowHeaderWidth' option.

You can use an isRowSelectable function to determine which rows are selectable. If you set this function in the options after grid initialisation you need to call gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS) to enable the option. In the grid below pressing the button to "set selectable" will set any rows that have an age > 30 to not be selectable, and also set the age of the first row to 31.