Create GanttSheet

To create a GanttSheet, follow the below steps:

1. Add the following script files to use the GanttSheet.

   <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
   <script src='.../spreadjs/plugins/gc.spread.sheets.tablesheet.x.x.x.min.js' type='text/javascript'></script>
   <script src='.../spreadjs/plugins/gc.spread.sheets.ganttsheet.x.x.x.min.js' type='text/javascript'></script>

2. Create an instance of the spread and add a sheet tab of type ganttSheet.

   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spread");
   var ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);

3. Initialize the data manager using the DataManager method.

   var dataManager = spread.dataManager();

4. Add a table in the Data Manager using the addTable method. This method accepts the table name as a string and the IDataSourceOption interface options.

   var myTable1 = dataManager.addTable("myTable1", {
       batch: true,
       remote: {
           read: {
                   url: apiUrl
                 }
   },

   Note: Since the data has a relation to the GanttSheet, you should use batch mode to save them.

5. Define the required hierarchy schema based on your data source structure.

   schema: {
       hierarchy: {
           type: "Parent",
               column: "parentId"
               },
               columns: {
                   id: { isPrimaryKey: true },
                   taskNumber: { dataType: "rowOrder" }
               }
   }

   To know more about different hierarchy types, please refer to the Add Hierarchy Types page.

   
   

6. Add a view to the table of the Data Manager using the addView method and define column info to initialize a GanttSheet.

   ganttSheet = spread.addSheetTab(0, "GanttSheet1", 
   GC.Spread.Sheets.SheetType.ganttSheet);
   var view = myTable1.addView("myView1", [
       { value: "taskNumber", caption: "NO.", width: 60 },
       { value: "name", caption: "Task Name", width: 200 },
       { value: "duration", caption: "Duration", width: 90 },
       { value: "predecessors", caption: "Predecessors", width: 120 , visible: false}
   ]);

7. Use the fetch method of the Data Manager view to retrieve the view, and then bind it to the GanttSheet using the bindGanttView method.

   view.fetch().then(function () {
   ganttSheet.bindGanttView(view);
   });