syidaxgrid
Home Pricing Settings

GRID FEATURE

Row selection

Row selection chooses targets for bulk actions such as approval, export, or assignment. Unlike cell range selection, it selects an entire order.

Markdown source Features

How it works and when to use it

Store selections as IDs, not display positions. Selecting a row does not itself delete an order or trigger server processing.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Select multiple orders

Configure checkboxes so users can select multiple orders at once.

javascript
grid.rowSelection = 'multi';
grid.selectionCheckbox = true;
await grid.selectRows(['ORD-0001', 'ORD-0003']);

Verify the result: Two orders are selected. Distinguish the displayed scope affected by the header checkbox from selecting all server data.

Example 2. Read bulk-action targets

Read selected IDs and pass them to your app's confirmation screen.

javascript
const selectedIds = await grid.getSelectedRowIds();
console.log(selectedIds);

Verify the result: The same order IDs remain identifiable after sorting. Connect your UI accordingly, for example by disabling the action button when selection is empty.

Example 3. Respond to selection changes

Update the selection count and details panel whenever a checkbox changes.

javascript
grid.addEventListener('selectionChanged', event => console.log(event.detail));
// Clear selection
await grid.selectRows([]);

Verify the result: Verify that clearing selection produces an empty result. Do not retain missing IDs or deleted orders as action targets.

Combining features and troubleshooting

Selecting loaded rows cannot represent selection of the entire server data set. Identify when you need the server row model's selection state API.

Read permission and selectability are different policies. Recheck authorization on the server when submitting operations for selected IDs.

Related reading