• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Mode Selection
Theme Selection
*Translated by Google Translator.
Essential Studio
All Controls

Example of Default Selection in ASP.NET Core Tree Grid Control

This sample demonstrates the selection feature in TreeGrid, which allows you to select row through simple mouse down or keyboard interaction.

Selection Type
Selection Mode

Selection provides an interactive support to highlight the row or cell that you select. Selection can be done through a simple Mouse down or Keyboard interaction. To enable selection, set allowSelection as true.

TreeGrid supports two types of selection which can be set using selectionSettings->type property. They are,

  • Single - Enabled by default. Allows the user to select single row/cell at a time.
  • Multiple - Allows the user to select more than one row/cell at a time.

Also, supports three modes of selection which can be set using selectionSettings->mode property. They are,

  • Row - Enabled by default. Enables the row selection in TreeGrid.
  • Cell - Enables the cell selection in TreeGrid.
  • Both - Enables both the row and cell selection in TreeGrid. Clicking any cell will select the both row and cell simultaneously.

The treegrid supports two types of cell selection mode that can be set by using the selectionSettings->cellSelectionMode property. They are,

  • Flow - The Flow value is set by default. The range of cells are selected between the start index and end index that includes in between cells of rows.
  • Box - Range of cells are selected from the start and end column indexes that includes in between cells of rows within the range.

To perform the multi-selection, hold CTRL key and click the desired rows/cells. To select range of rows/cells, hold SHIFT key and click the rows/cells.

While using the TreeGrid in a touch device environment, there is an option for multi-selection through single tap on the row and it will show a popup with the multi-selection symbol. Tap the icon to enable multi-selection in a single tap.

More information on the data binding can be found in this documentation section.

Transform your ASP.NET Core web apps today with Syncfusion ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing