Touch Interaction in Blazor Gantt Chart Component

23 Jun 20223 minutes to read

The Gantt Chart component supports to perform user interactions in mobile and tablet devices. This section explains how to interact with the Gantt features in touch-enabled devices.

Tooltip

To perform touch and hold action on a element, refer to Tooltip Popup.

Context Menu

To perform long press action on a row, Context Menu is opened, and then tap a menu item to trigger its action.

Sorting

To perform tap action on a column header, trigger Sorting operation to the selected column. A popup is displayed for multi-column sorting. To sort multiple columns, tap the popup, and then tap the desired column headers.

The following screenshot shows Gantt touch sorting,

Multiple Sorting in Blazor Gantt Chart

Column resize

When the right edge of the column header cell is tapped, a floating handler will be visible over the right border of the column. To Resize the column, drag the floating handler as needed.

The following screenshot represents the Gantt column resizing in touch device.

Resizing Column in Blazor Gantt Chart

Editing

The Gantt Chart component editing actions can be achieved using the double tap and tap and drag actions on an element.

The following table describes different types of editing modes available in Gantt.

Action Description
Cell editing To perform double tap on a specific cell, initiate the cell to be in edit state.
Dialog editing To perform double tap on a specific row, initiate the edit dialog to be opened.
Taskbar editing Taskbar editing action is initiated using the tap action on the taskbar.
Parent taskbar : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing.
Blazor Gantt Chart displays editing parent taskbar in touch mode

Child taskbar : Once you tap the child taskbar, it will be changed to editing state.
Blazor Gantt Chart displays editing parent taskbar in touch mode

Dragging taskbar : To drag a taskbar to the left or right in editing state.

Resizing taskbar : To resize a taskbar, drag the left/right resize icon.

Progress resizing : To change the progress, drag the progress resize icon to the left or right direction.

Task Dependency Editing

Tap the taskbar to initiate the taskbar editing for predecessors. Once it enters the edited state, tap the left or right connector point to initiate the task dependencies editing. The dialog will be rendered with the message Choose another task and Cancel button.

Task Dependency Editing in Blazor Gantt Chart

Click the Cancel button to cancel the edit action and to continue editing, tap another taskbar to establish the dependency line between the two taskbars.

Once the second taskbar is tapped, the dialog will display a message Select the connector position and Cancel button. A tooltip is also displayed near the second taskbar with the Left and Right buttons. Click any button to establish a dependency relationship between the two tasks.

Task Dependency Editing in Blazor Gantt Chart

Selection

When you tap gantt row, tapped row will be selected.

Single selection : To select a single row or cell, perform single tap on it.

Multiple selection : To perform multiple selection, tap on the multiple selection popup, and then tap the desired rows or cells.

Multiple selection in Blazor Gantt Chart

You can refer to our Blazor Gantt Chart feature tour page for its groundbreaking feature representations. You can also explore our Blazor Gantt Chart example to know how to render and configure the Gantt.