• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency

Example of Selection API in ASP.NET MVC Data Grid Control

This sample demonstrates the selection functionality of the Grid, you can select multiple row by entering start and end index then click the select row button. To clear all selected rows, click clear selection button.

DEMO
SOURCE
Select Rows
Start
To
Select Row
Clear Selection

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

Grid 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/column at a time.

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

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

To perform the column selection, enable the selectionSettings->allowColumnSelection property.

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

While using the Grid in a touch device environment, there is an option for multi-selection through a 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.

In this demo, enter the values in the Start and To text box to select range of rows. And click the Clear Selection button to deselect the rows.

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