Spread.Views and the Gantt View

A Gantt view that displays the tasks and progress of a project can make it easier to plan and allocate resources. You can manage your projects with the Spread.Views Gantt view. Spread.Views allows you to create a Gantt view with a minimum number of steps. The example in this blog creates a product management outline. To create this example, use the following steps.

  1. Add the following links to your page. The gridLayoutEngine reference is used for a basic grid. The Gantt reference is required for a Gantt view. 

    <script src="./common/gc.spread.common.10.0.0.min.js" type="text/javascript"></script>  
<link rel="stylesheet" type="text/css" href="./plugins/gc.spread.views.gantt.10.0.0.css">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript"></script>  
<link rel="stylesheet" type="text/css" href="./gc.spread.views.dataview.10.0.0.css">  
<script src="./gc.spread.views.dataview.10.0.0.min.js" type="text/javascript"></script>  
<script src="./plugins/gc.spread.views.gridlayout.10.0.0.min.js" type="text/javascript"></script>  
<script src="./plugins/gc.spread.views.gantt.10.0.0.min.js" type="text/javascript"></script>

  2. Add basic styles and any formatting for the view. The following styles set colors for the items in the view and the height and width for the grid.

    <style>  
.gc-gantt-parent-percentComplete {  
fill: #7b68ee;  
}  
.gc-gantt-item-parent {  
fill: #b0c4de;  
}  
.gc-gantt-child-percentComplete {  
fill: #deb887;  
}  
.gc-gantt-item-child {  
fill: #ffe4c4;  
}  
.gc-gantt-item-text {  
fill: #000000;  
}  
</style>  
<body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;">  
<div id="grid1" style="height: 700px;width: 2200px;"></div>

  3. Define dataview.

    var dataView;

  4. Create the column layout and specify the settings for the Gantt column.

    var columns = [{  
id: 'id',  
caption: 'Item ID',  
dataField: 'id',  
width: 80  
}, {  
id: 'start',  
caption: 'Start Date',  
dataField: 'start',  
width: 130,  
dataType: 'date',  
format: 'mmm dd,yyyy'  
}, {  
id: 'end',  
caption: 'End Date',  
dataField: 'end',  
width: 130,  
dataType: 'date',  
format: 'mmm dd,yyyy'  
}, {  
id: 'gantt',  
ganttColumn: {  
timeLineScale: 'month',  
scale: 300,  
start: 'start',  
end: 'end',  
text: 'description'  
},  
width: '*'  
}];

  5. Add the data from a JSON file. 

    $.getJSON('newdatafile.json', function(data)

  6. Create the view and specify the hierarchy settings.

    {  
dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({  
colHeaderHeight: 48,  
rowHeight: 48,  
hierarchy: {  
keyField: 'id',  
parentField: 'parentID',  
collapsed: false,  
column: 'id',  
footer: {  
visible: false  
}  
}  
}));

These are all the steps you need to create a Gantt view in Spread.Views. SpreadViewsGantt You can get the data file used in this example from: newdatafile Here is the complete code example: 

<!doctype html>  
<html style="height:100%;font-size:14px;">  

<head>  
<meta name="viewport" content="width=device-width, initial-scale=1.0" />  
<script src="./common/gc.spread.common.10.0.0.min.js" type="text/javascript"></script>  
<link rel="stylesheet" type="text/css" href="./plugins/gc.spread.views.gantt.10.0.0.css">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript"></script>  
<link rel="stylesheet" type="text/css" href="./gc.spread.views.dataview.10.0.0.css">  
<script src="./gc.spread.views.dataview.10.0.0.min.js" type="text/javascript"></script>  
<script src="./plugins/gc.spread.views.gridlayout.10.0.0.min.js" type="text/javascript"></script>  
<script src="./plugins/gc.spread.views.gantt.10.0.0.min.js" type="text/javascript"></script>  
</head>  

<style>  
.gc-gantt-parent-percentComplete {  
fill: #7b68ee;  
}  
.gc-gantt-item-parent {  
fill: #b0c4de;  
}  
.gc-gantt-child-percentComplete {  
fill: #deb887;  
}  
.gc-gantt-item-child {  
fill: #ffe4c4;  
}  
.gc-gantt-item-text {  
fill: #000000;  
}  
</style>  

<body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;">  
<div id="grid1" style="height: 700px;width: 2200px;"></div>  

<script type="text/javascript">  
var dataView;  
var columns = [{  
id: 'id',  
caption: 'Item ID',  
dataField: 'id',  
width: 80  
}, {  
id: 'start',  
caption: 'Start Date',  
dataField: 'start',  
width: 130,  
dataType: 'date',  
format: 'mmm dd,yyyy'  
}, {  
id: 'end',  
caption: 'End Date',  
dataField: 'end',  
width: 130,  
dataType: 'date',  
format: 'mmm dd,yyyy'  
}, {  
id: 'gantt',  
ganttColumn: {  
timeLineScale: 'month',  
scale: 300,  
start: 'start',  
end: 'end',  
text: 'description'  
},  
width: '*'  
}];  

$.getJSON('newdatafile.json', function(data) {  
dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({  
colHeaderHeight: 48,  
rowHeight: 48,  
hierarchy: {  
keyField: 'id',  
parentField: 'parentID',  
collapsed: false,  
column: 'id',  
footer: {  
visible: false  
}  
}  
}));  
});  
</script>  
</body>  
</html>

You can download a CTP of Spread.Views here: http://spread.grapecity.com/spreadjs/views/.

MESCIUS inc.

comments powered by Disqus