Vue Data GridSSRM Row Selection

vue logo

Selecting rows and groups in the Server-Side Row Model is supported. Just set the property rowSelection to either 'single' or 'multiple' as with any other row model.

Server-Side Row Selection requires Row IDs to be supplied to grid.

Enabling Row Selection

Row selection can be enabled in the grid by setting the rowSelection property to single or multiple. The below example demonstrates this property configured as multiple, note the following:

  • Selecting a single row can be achieved by clicking it. Clicking another row selects it and de-selects any other rows.
  • Selecting multiple rows can be achieved by holding down ^ Ctrl and mouse clicking the rows. A range of fully loaded rows can be selected by using ⇧ Shift.
  • The selected rows are preserved when the grid is sorted or filtered and are displayed as selected when scrolled into view. Select a row, apply a column filter so that the selected row is in the filter results and it will appear as selected in the filter results. If a selected row doesn’t match the applied filter, it will still be selected when the filter is removed.

Checkbox Selection

Checkboxes can be enabled on any column by setting checkboxSelection: true in the column defs. To enable a checkbox on a group column, see the snippet on the Row Selection page.

The following example demonstrates checkbox selection with the SSRM. Note the following;

  • Checkbox selection on the group column allowing selection of any group after 2004.
  • Checkbox selection on the group sport column. Selection is again restricted to rows after 2004 only via gridOptions.isRowSelectable(rowNode) callback.