(Showing Draft Content)

SpreadJS Designer Component provides the option to insert a GanttSheet in a workbook.

The GanttSheet button is available in the INSERT > Sheets tab group. Clicking on the GanttSheet button adds a GanttSheet1 sheet to the sheets collection of the workbook and opens the GANTT CHART FORMAT tab.

1.png

By default, the GANTT CHART FORMAT tab displays a blank area on the left and a Gantt Sheet panel on the right.

2.png

To add a data source, select the (New Table) option from the Binding Table drop-down present in the Gantt Sheet Panel or by clicking the DataSource ribbon button from the DATA > Data Binding tab group.

In the DataSource, you can add tables and provide the external URL for CRUD operations. You can further fetch the table data using the Columns tab.

3.png

4.png

You can click a column item to view or edit its properties, schema type, and to add a relationship. A calculated column can also be added by clicking the Add Calculate Column at the bottom of the list.

After fetching the DataSource using Designer, you can now bind the table DataSource into the GanttSheet through the Gantt Sheet Panel.

The Binding Table dropdown allows you to select an existing data source or create a new one. The GanttSheet will now appear on the blank GanttSheet view area.

5.png

SpreadJS enables you to display relationships of a column in the Data Source Columns list for both the designer and the runtime Gantt Sheet panel. A linked icon is presented to indicate the related column. To explore the details of the relationship, you can click the arrow button.

6.png

SpreadJS also shows relationships on the Gantt Sheet panel. The Fields section displays the name of the connection columns, along with an expand arrow button. You can expand the relationship column nodes and view the child nodes if needed.

7.png

The Gantt Sheet panel displays a tree-like structure to better depict the relationship between parent-child nodes.

Note that the check/uncheck buttons are also available to check or uncheck the columns in the GanttSheet. When you select the main relationship column, a column with the object will appear in the GanttSheet. However, if a child relationship column is selected, the matching column will be inserted, and the child column names will include the hierarchical relationship with the "." symbol, such as myTable1_Id.id.

8.png

The SpreadJS Designer Component also enables you to modify column settings. To make modifications to the default settings, select a column in the Gantt Sheet. This will open the COLUMN SETTING tab, where you can adjust various parameters such as caption, value, column name, data type, styles, and so on as needed.

9.png

Additionally, GanttSheet enables you to perform different task-related operations, view data information, change chart formats, etc. To know more, refer to the following topics.

Topic	Description
Task Tab	Provides options to perform various task operations.
Project Tab	Provides options to manage project information.
View Tab	Provides options to sort and zoom a specific timescale.
Gantt Chart Format Tab	Provides options to customize the taskbar appearance.