- SpreadJS Overview
- Getting Started
- JavaScript Frameworks
- Best Practices
-
Features
- Workbook
- Worksheet
- Rows and Columns
- Headers
- Cells
- Data Binding
- TableSheet
- GanttSheet
- ReportSheet
- Data Charts
- JSON Schema with SpreadJS
- SpreadJS File Format
- Data Validation
- Conditional Formatting
- Sort
- Group
- Formulas
- Serialization
- Keyboard Actions
- Shapes
- Floating Objects
- Barcodes
- Charts
- Sparklines
- Tables
- Pivot Table
- Slicer
- Theme
- Culture
- AI Assistant
- SpreadJS Designer
- SpreadJS Designer Component
- SpreadJS Collaboration Server
- Touch Support
- Formula Reference
- Import and Export Reference
- Frequently Used Events
- API Documentation
- Release Notes
Context Menu
SpreadJS supports a built-in context menu that appears when you trigger a right-click mouse event on the GanttSheet. During runtime only, the context menu is visible on the left side of the GanttSheet. It allows you to quickly execute some of the important or repetitive operations.
Refer to the following depicting the context menu of the GanttSheet.
ganttsheet-contextmenu
The following are the elements of the Context Menu:
Copy: The copy operation copies all the contents of value, style, and cell type.
Cut: The cut operation cuts the content including value, style, cell type, etc., and the original content is not retained when pasted to other places. In the duration, start, and finish columns, the Cut-Paste operation is only performed if the task is a normal task and the mode is Auto, which does not change the content. However, if the task is a summary task and the mode is Manual the content is cleared. In the GanttSheet, Task Name retains the previous outline format after executing the cut-paste operation.
Note: The Predecessors column cut clears the contents and the Mode can be empty after the Cut-Paste operation.
Paste: The paste operation only pastes the values.
Scroll To Tasks: The Scroll to Tasks operation scrolls the current task to the top 25% of the Gantt column.
Refer to the images below to see how the selected task scrolls to the start of the task.
GS-scrolltask1
GS-scrolltask2
Note that if the current task has a start, the start date will be the main date.
However, if the current task has only a finish date and no start or duration, the finish date will be the main date.
Refer to the images below to see how the selected task scrolls to the end of the task.
GS-scrolltask_nofinish1
GS-scrolltask_nofinish2
Insert Task: The Insert Task operation adds a normal task before the selected task.
ganttsheet-inserttask
You can add multiple tasks by selecting the number of rows.
ganttsheet-insertmultipletask
Delete Tasks: The Delete task operation deletes the currently selected task and if the summary task is selected, all the child nodes are deleted at the same time. You can also delete multiple tasks at the same time.
Manually Schedule: The Manually Schedule operation allows you to change the mode of the selected task to Manual. However, if more than one task is selected at once, the mode of the first task gets changed.
Auto-Schedule: The Auto Schedule operation allows you to change the mode of the selected task to Auto. However, if more than one task is selected at once, the mode of the first task gets changed.
Note: Inserting/deleting tasks and changing the task schedule mode in GanttSheet are not supported by the Summary task.