experiment_id: web-retrieval-v1
fixture_id: /docs/features/selection
mode: provenance
representation: html
origin_response_id: fd94ccb9577644194b04128a8ad8c4ff
version: 2026-10-22
version_created_at_utc: 2026-10-22T19:49:39.631Z
version_nonce: 00b6431fd4d8353a9da8852b11c644d0
generated_at_utc: 2026-10-26T03:44:20.299Z
response_nonce: e661b711c6c4c31710896ec0a1400b4d
Docs Version 1

Selection

ZingGrid offers multiple ways to make selections on your grid. The current selection options are cell, row, or multiple.

Select Cell(s)

Add the selector attribute to the <zing-grid> tag to enable selection (see below). Select individual cells by clicking, or select multiple cells by clicking and dragging. To deselect the cells, press the "esc" key.

<zing-grid selector>
    <zg-colgroup>
      <zg-column></zg-column>
    </zg-colgroup>
</zing-grid>

Cell Selection Enabled Grid

Here is a complete grid with selecting by cells enabled:

Top

Select Card(s)

In card mode, selection applies to the whole card. Add the selector attribute to the <zing-grid> tag to enable selection, then click a card to select it, or click and drag to select multiple cards. To deselect the cards, press the "esc" key.

<zing-grid selector layout="card">
    <zg-colgroup>
      <zg-column></zg-column>
    </zg-colgroup>
</zing-grid>

Card Selection Enabled Grid

Here is a complete grid with selecting by cards enabled:

Top

Select Row(s)

To select individual or multiple rows, add a column with [type="selector"] to enable checkboxes, like so:

<zing-grid selector>
    <zg-colgroup>
      <zg-column type="selector"></zg-column>
    </zg-colgroup>
</zing-grid>

Row Select Enabled Grid

Here is a complete grid with selecting by rows enabled:

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: selection]