Cell Selection in JavaScript Gantt Chart Control

18 Nov 20182 minutes to read

Cell selection in the Gantt Chart control enables interactive selection of specific cells or ranges of cells within the grid. You may select cells using mouse clicks or arrow keys (up, down, left, right). This is useful for highlighting, manipulating, or performing operations on particular Gantt cells.

Single cell selection

Single cell selection in the Gantt Chart is enabled by setting selectionSettings.mode to Cell and selectionSettings.type to Single. This allows selecting only one cell at a time.

Multiple cell selection

Multiple cell selection in the Gantt Chart is enabled by setting selectionSettings.mode to Cell and selectionSettings.type to Multiple. This allows selecting multiple cells at a time by holding the Ctrl key while clicking on each desired cell.

Cell selection mode

Cell selection mode controls how cells or ranges are selected. Set the desired mode using selectionSettings.cellSelectionMode:

  • Flow (default): Selects a continuous flow of cells between the start and end indices across rows.
  • Box: Selects a rectangular range covering specified rows and columns.
  • BoxWithBorder: Similar to Box mode, but applies a border for better visual distinction of the selected range.

For cell selection modes, selectionSettings.mode must be Cell or Both, and type must be Multiple.

The following example demonstrates how to change both the selection mode and the cell selection mode using a DropDownList control.

Select cells externally

You may programmatically select a single row, multiple cells, or a range of cells in the Gantt Chart using built-in methods.

Single cell selection

Select a specific cell in the Gantt Chart by calling the selectCell method and providing the desired row and column indexes as arguments.

Multiple cell selection

Select multiple cells in the Gantt Chart by calling the selectCells method and providing an array of the row and column indexes for each target cell.

Get selected cell information

To retrieve information about selected cells in the Gantt Chart, use methods like getSelectedRowCellIndexes method to get the list of row and column indexes for selected cells, and the getCellSelectedRecords method to retrieve the related data objects for each selected cell.

Customize cell selection action

While selecting a cell in Gantt, the cellSelecting and cellSelected event will be triggered. The cellSelecting event will be triggered on initialization of cell selection action, and you can get the current selecting cell information to prevent the selection of a particular cell in a particular row. The cellSelected event will be triggered on completion of cell selection action, and you can get the current selected cell’s information. The following code example demonstrates how to prevent the selection of the cell using the cellSelecting event.

Limitations for cell selection

  • Cell-based selection is not supported when virtualization is enabled.