Thursday, 11 August, 2016 UTC

Spread.Views and the Gantt View

Spread.Views and the Gantt View

Summary

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. 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="dataview.css">
<link rel="stylesheet" type="text/css" href="plugins/Gantt.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript"></script>
<script src="dataview.min.js" type="text/javascript"></script>
<script src="plugins/GridLayoutEngine.min.js" type="text/javascript"></script>
<script src="plugins/Gantt.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.DataView.Plugins.GridLayoutEngine({
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.
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" />
<link rel="stylesheet" type="text/css" href="dataview.css">
<link rel="stylesheet" type="text/css" href="plugins/Gantt.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript"></script>
<script src="dataview.min.js" type="text/javascript"></script>
<script src="plugins/GridLayoutEngine.min.js" type="text/javascript"></script>
<script src="plugins/Gantt.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.DataView.Plugins.GridLayoutEngine({
colHeaderHeight: 48,
rowHeight: 48,
hierarchy: {
keyField: 'id',
parentField: 'parentID',
collapsed: false,
column: 'id',
footer: {
visible: false
}
}
}));
});
</script>
</body>
</html>

... more @ sphelp.grapecity.com

sphelp.grapecity.com