Tree Grid / Selection / Default Selection

Blazor Tree Grid Example - Default Selection

Loading Syncfusion Blazor Server Demos…

Properties

This sample illustrates interactive selection in the Tree Grid, enabling row and cell selection via mouse, keyboard, and touch gestures.

Selection is enabled by setting AllowSelection to true and configured through TreeGridSelectionSettings to control selection type, selection mode, and cell selection behavior.

Use the following options to control selection:

  • TreeGridSelectionSettings.Type: Choose SelectionType.Single to allow one row or cell at a time or SelectionType.Multiple to allow multiple rows or cells.
  • TreeGridSelectionSettings.Mode: Set to Row, Cell, or Both to define how selection is applied.
  • TreeGridSelectionSettings.CellSelectionMode: Use Flow for a continuous range or Box for a rectangular range between start and end columns across rows.
  • Keyboard and touch: Hold CTRL to select multiple items, hold SHIFT to select a range, and on touch devices use the multi-selection popup to enable multiple selection.

This demo wires dropdowns to update TreeGridSelectionSettings at runtime, allowing you to switch the selection type, selection mode, and cell selection mode programmatically and observe how each configuration affects interaction.

More information about selection can be found in this documentation section.

Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE