Blazor Dropdown Tree Example - Selection Modes

This example demonstrates the DropDownTree component’s checkbox and multi-selection capabilities in both box and delimiter visual modes. It illustrates hierarchical selection behavior, keyboard-assisted multi-selection, and how selected values are presented in the input area.

Selection behavior:

• Checking a parent node toggles its children; unchecking propagates similarly to maintain hierarchy consistency.
• A parent node’s checkbox reflects child selections (checked, unchecked, or indeterminate) based on descendant states.
• Hold the CTRL key and click nodes to select or deselect multiple non-contiguous items.
• Hold the SHIFT key and click another node to select a contiguous range between nodes.

Checkbox configuration:

• Enable checkboxes using the ShowCheckBox property; checkboxes render on the left of each item.
• Checkboxes support multi-item checking and visually indicate selected, unchecked, and indeterminate states as appropriate.

Multi-selection configuration:

• Enable multi-selection with the AllowMultiSelection property to permit selecting multiple nodes via keyboard or mouse.
• Box and delimiter modes determine how selected values are presented in the input area—either as removable chips (box) or as a compact delimiter-separated string.

Bind selection to model properties or form fields to capture checked nodes; value output contains selected node ids or display texts depending on configuration. When filtering or paging is applied, verify that checked and selected states persist for off-screen or filtered nodes. Configure item templates to include visual affordances while preserving keyboard focus and ARIA semantics; ensure that indeterminate states are announced to assistive technologies. Use box mode to render selected items as removable chips, and delimiter mode when a compact, comma-separated representation is preferred. Validate behavior across browsers and screen sizes to ensure predictable interaction.