Touch Interaction in Blazor Gantt Chart Component
17 Sep 20213 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.
touch and hold action on a element, refer to Tooltip Popup.
long press action on a row, Context Menu is opened, and then tap a menu item to trigger its action.
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,
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.
The Gantt Chart component editing actions can be achieved using the double tap and tap and drag actions on a element.
The following table describes different types of editing modes available in Gantt.
|Cell editing||To perform
|Dialog editing||To perform
|Taskbar editing||Taskbar editing action is initiated using the
Parent taskbar : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing.
Child taskbar : Once you tap the child taskbar, it will be changed to editing state.
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.
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.
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 knows how to render and configure the gantt.