---
title: Grid rendering and row-click wiring
summary: Provide a styled `GridView` with accessible markup and optional client-side row-click behavior.
status: draft
owner: SAIF Doc Gen
last_reviewed: 2026-08-17
library: SAIF.Presentation.Web.Controls.V2
reference_type: package
operation_id: OP-V2-013
trigger: Control construction, `Init`, `RowDataBound`, and `PreRender` for a `SAIFGrid` instance.
---

# Grid rendering and row-click wiring

Provide a styled `GridView` with accessible markup and optional client-side row-click behavior. Control construction, `Init`, `RowDataBound`, and `PreRender` for a `SAIFGrid` instance.

| Field | Value |
| --- | --- |
| **Operation ID** | OP-V2-013 |
| **Trigger** | Control construction, `Init`, `RowDataBound`, and `PreRender` for a `SAIFGrid` instance. |
| **Inputs** | `DataKeyField`, bound data items. |
| **Outputs** | Styled grid markup with an accessible header and, when configured, client-side row-click attributes. |
| **Primary components** | `SAIFGrid` |
| **Entry point** | `SAIF.Presentation.Web.Controls.V2/SAIFGrid.vb` |

## Steps

1. On construction, set the CSS class to `SAIFGrid`. ([BR-V2-081](../business-rules.md#br-v2-081-every-saifgrid-carries-the-saifgrid-css-class))
2. On `Init`, register `/Resources/Scripts/SAIF.Grid.js` and a generated startup script block, each only once per page. ([BR-V2-082](../business-rules.md#br-v2-082-grid-scripts-registered-once-per-page))
3. On `RowDataBound`, when `DataKeyField` is non-empty and the row is a data row, read that property from the bound item by reflection and emit it as the row's `dataKeyField` attribute. ([BR-V2-083](../business-rules.md#br-v2-083-row-click-wiring-requires-a-populated-datakeyfield), [BR-V2-084](../business-rules.md#br-v2-084-row-key-value-read-by-reflection))
4. On `PreRender`, when the grid has rows, enable the accessible header and move the header row into the `<thead>` table section. ([BR-V2-085](../business-rules.md#br-v2-085-grids-with-rows-get-an-accessible-header))

## Process flow

The following diagram visualizes this operation's control flow.

```mermaid
flowchart TD
	Start([Construction]) --> Css[Set SAIFGrid CSS class]
	Css --> Init[Init: register SAIF.Grid.js + startup script]
	Init --> RDB{RowDataBound}
	RDB --> Key{DataKeyField set?}
	Key -->|Yes| Reflect[Reflect key value, emit row attribute]
	Key -->|No| Skip[Skip row-click wiring]
	Reflect --> Pre[PreRender: accessible header, thead]
	Skip --> Pre
	Pre --> Done([Rendered])
```

## Failure and edge-case behavior

- No exceptional failure handling beyond the branches described in **Steps** was found in the analysis findings.*

## Related documentation
- [Operations and processes](../operations-processes.md)
- [Business rules](../business-rules.md)

## Sources
- `SAIF.Presentation.Web.Controls.V2/SAIFGrid.vb`