Row Selection in JavaScript Gantt Chart Control

18 Nov 20183 minutes to read

The JavaScript Gantt Chart control supports row selection using mouse clicks or keyboard navigation (arrow keys). This enables users to highlight, manipulate, or trigger actions on selected task rows.

Single row selection

You can enable single row selection in the Gantt Chart control by setting selectionSettings.mode to Row and selectionSettings.type to Single. This allows you to select only one task row at a time.

Multiple row selection

You can enable multiple row selection in the Gantt Chart control by setting selectionSettings.mode to Row and selectionSettings.type to Multiple. This allows selection of more than one task row at a time by holding down the Ctrl key while clicking on multiple rows.

Row selection event sequence

• On initial row selection: rowSelecting triggers first, followed by rowSelected.

• When selecting a different row:

  • rowSelecting is followed by rowDeselecting and rowDeselected to deselect the previously selected row.

  • Then, rowSelected triggers for the newly selected row.

This sequence ensures proper handling of row transitions during selection and deselection.

Select row at initial rendering

You can highlight or pre-select a specific row during the initial rendering of the Gantt Chart control by setting the selectedRowIndex property. This selects the row at the specified index when the Gantt loads.

The following example selects the row at index 5 during initial load:

Select rows externally

You can programmatically or dynamically select single rows, multiple rows, or a range of rows in the JavaScript Gantt Chart control.

Single row selection

Select a single row in the Gantt Chart control by calling the selectRow method with the desired row index.

Multiple rows selection

Select multiple rows in the Gantt Chart control by using the selectRows method with an array of row indexes.

Range of rows selection

Select a range of rows in the Gantt Chart control by using the selectRowsByRange method with the start and end row indexes.

Enable multi row selection without Ctrl key

You can enable simple multi-row selection by setting the enableSimpleMultiRowSelection property to true in the Grid configuration during the created event. This allows multiple rows to be selected individually through clicks without holding the Ctrl key.

Get selected row information

To access selected row details in the JavaScript Gantt Chart control:

• getSelectedRowIndexes – Returns the index positions of selected rows.
• getSelectedRecords – Provides the corresponding data objects.
• getSelectedRows – Retrieves the actual row elements from the DOM.

Note: The Gantt Chart control supports keyboard navigation for row selection. Use arrow keys to move focus and Enter or Space to select rows. Ensure accessibility compliance by providing appropriate ARIA attributes.

Customize row selection action

You can customize row selection in the Gantt Chart using rowSelecting, rowSelected, rowDeselecting, and rowDeselected events, which allow dynamic control over selection behavior based on specific conditions.

The following demonstrates how row selection and background color updates are handled in the JavaScript Gantt Chart control:

• In rowSelecting, selection is prevented when TaskID is 2.
• In rowSelected, rows with Progress > 40 are highlighted with a green background.
• In rowDeselected, rows with Progress ≤ 40 are styled with mauve background color.
• In rowDeselecting, if Progress > 80, the background color changes to yellow.

The following sample demonstrates