Overview

Theme:

GanttSheet is a fast, data-bound DataTable view with gantt behavior and a spreadsheet user interface.

Initialization

SpreadJS GanttSheet supports using a DataManager View as a data source.

To use the GanttSheet, add the js file link into the document's head section:

    <head>
       ...
       <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>
    </head>

Then you can use the DataManager with the hierarchy schema:

//init a data manager
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 0});
var dataManager = spread.dataManager();
var apiUrl = "ganttsheet_data_api_url";
myTable = dataManager.addTable("myTable", {
    batch: true,
    remote: {
        read: {
            url: apiUrl
        },
        batch: {
            url: apiUrl
        }
    },
    schema: {
        hierarchy: {
            type: "Parent",
            column: "parentId"
        },
        columns: {
            id: { isPrimaryKey: true },
            taskNumber: { dataType: "rowOrder" }
        }
    }
});

You can then define the correct hierarchy schema based on your source data structure.

// the id-parentId structure
schema: {
    hierarchy: {
        type: "Parent",
        column: "parentId"
    },
    columns: {
        id: { isPrimaryKey: true }, // the primary key is required in Id-ParentId type, so that we could build the hierarchy tree nodes
        taskNumber: { dataType: "rowOrder" } // the row order is required in Id-ParentId type, to make sure the you could update the correct data
    }
}

// the level structure
schema: {
    hierarchy: {
        type: "Level",
        column: "level"
    }
}

// the children tree structure
schema: {
    hierarchy: {
        type: "ChildrenPath",
        column: "children"
    }
}

Then initialize a GanttSheet.

var ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
var view = myTable.addView("ganttView", [
    { value: "taskNumber", caption: "Task Number", width: 100 },
    { value: "mode", caption: "Mode", width: 65 },
    { value: "name", caption: "Task Name", width: 280 },
    { value: "duration", caption: "Duration", width: 90 },
    { value: "start", caption: "Start", width: 120 },
    { value: "finish", caption: "Finish", width: 120 },
    { value: "predecessors", caption: "Predecessors", width: 120 }
]);
view.fetch().then(function() {
    ganttSheet.bindGanttView(view);
});

Batch Mode

The project data records in a GanttSheet are structured data, so batch mode should be used.

Gantt Column

GanttSheets have a property called enableGanttColumn that controls whether to show the gantt column.

By default, this option is true. If you don't want to show it, you can set this property to false when you create GanttSheet or call ganttSheet.bindGanttView(view, { enableGanttColumn: false }).

Feedback

Submit and view feedback for

This Product This Page

Initialization SpreadJS GanttSheet supports using a DataManager View as a data source. To use the GanttSheet, add the js file link into the document's head section: Then you can use the DataManager with the hierarchy schema: You can then define the correct hierarchy schema based on your source data structure. Then initialize a GanttSheet. Batch Mode The project data records in a GanttSheet are structured data, so batch mode should be used. Gantt Column GanttSheets have a property called enableGanttColumn that controls whether to show the gantt column. By default, this option is true. If you don't want to show it, you can set this property to false when you create GanttSheet or call ganttSheet.bindGanttView(view, { enableGanttColumn: false }).

<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-ganttsheet";
import "@mescius/spread-sheets-vue";
const spreadRef = ref(null);
function initSpread (spread) {
spread.suspendPaint();
spread.clearSheets();
initGanttSheetWithIdParentIdData(spread);
initGanttSheetWithLevelData(spread);
initGanttSheetWithChildrenData(spread);
spread.resumePaint();
}
function initGanttSheetWithIdParentIdData (spread) {
let tableName = "Gantt_Id";
let baseApiUrl = getBaseApiUrl();
let apiUrl = baseApiUrl + "/" + tableName;
let dataManager = spread.dataManager();
let myTable1 = dataManager.addTable("myTable1", {
batch: true,
remote: {
read: {
url: apiUrl
}
},
schema: {
hierarchy: {
type: "Parent",
column: "parentId"
},
columns: {
id: { isPrimaryKey: true },
taskNumber: { dataType: "rowOrder" }
}
}
});
let ganttSheet = spread.addSheetTab(0, "GanttSheet1", GC.Spread.Sheets.SheetType.ganttSheet);
let view = myTable1.addView("myView1", [
{ value: "taskNumber", caption: "NO", width: 60 },
{ value: '=CONCAT("(L",LEVEL(),"-",LEVELROWNUMBER(),")")', caption: "L" },
{ value: "name", caption: "Task Name", width: 200 },
{ value: "duration", caption: "Duration", width: 90 },
{ value: "predecessors", caption: "Predecessors", width: 60 },
{ value: "cost", caption: "Cost", style: { formatter: "$0" } }
]);
view.fetch().then(function() {
ganttSheet.bindGanttView(view);
});
}
function initGanttSheetWithLevelData (spread) {
let tableName = "Gantt_Level";
let baseApiUrl = getBaseApiUrl();
let apiUrl = baseApiUrl + "/" + tableName;
let dataManager = spread.dataManager();
let myTable1 = dataManager.addTable("myTable1", {
batch: true,
remote: {
read: {
url: apiUrl
}
},
schema: {
hierarchy: {
type: "Level",
column: "level"
}
}
});
let ganttSheet = spread.addSheetTab(1, "GanttSheet2", GC.Spread.Sheets.SheetType.ganttSheet);
let 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 }
]);
view.fetch().then(function() {
ganttSheet.bindGanttView(view);
});
}
function initGanttSheetWithChildrenData (spread) {
let tableName = "Gantt_Children";
let baseApiUrl = getBaseApiUrl();
let apiUrl = baseApiUrl + "/" + tableName;
let dataManager = spread.dataManager();
let myTable1 = dataManager.addTable("myTable1", {
batch: true,
remote: {
read: {
url: apiUrl
}
},
schema: {
hierarchy: {
type: "ChildrenPath",
column: "children"
}
}
});
let ganttSheet = spread.addSheetTab(2, "GanttSheet3", GC.Spread.Sheets.SheetType.ganttSheet);
let 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 }
]);
view.fetch().then(function() {
ganttSheet.bindGanttView(view);
});
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>

<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>

(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-ganttsheet': 'npm:@mescius/spread-sheets-ganttsheet/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);