Server-side tree

View source

Lazy-load nested children from the server. The grid only fetches a level when the user expands a parent; cycles, sort, and filter are handled by the row-model engine.

Region / Status / Order

Order #

Customer

Amount

Sales rep

Try this

The synthetic loader simulates a 250ms round trip per level. Three levels: Region → Status → Order.

Click the chevron on a region row — children fetch on demand.
Drill to the leaf level to see the actual order rows.
Collapse and re-expand — the level is cached; no re-fetch.
Press Right on a parent to expand from the keyboard.

The contract

loadChildren(query, ctx). Receives { parentRowId, groupPath, childStart, childCount, view }. Roots are fetched with parentRowId === null.
ServerTreeRow. Each row is kind: "leaf" | "group". Group rows can be expanded; leaf rows are the actual data. hasChildren on group rows tells the grid to render a chevron.
Pagination per level. childStart + childCount window large groups; the grid auto-fetches subsequent windows as the user scrolls within the parent.
Expansion persistence. preserveExpansionOnViewChange keeps the expansion set across filter / sort / search refires; children re-fetch only for previously-expanded rows that still exist in the new root set.

Tree vs grouping vs client-tree

Server tree (this page) — children fetched on demand. Use when the data is too large to load all at once.
Client tree — all rows in memory; treeData.getRowParentId derives the structure. See the Tree row model page.
Grouping — flat data bucketed by a shared key at render time. See the Grouping page.