In HTML

Your First Gantt

Let us start with creating a new project directory, for example MyFirstGantt.

1) Gantt Widget Source JS files

To begin with, you need the JS Source files that are required by the Gantt Widget. These files are in the <install path>/Src folder. Simply copy over the whole Src folder into the above directory. This folder also has other dependant css files, etc. You can delete the "Src/bin" folder as that's not required for this HTML sample.

2) Sample Utility JS files

Some JS files with utility functions that enables inline-editing in the grid, etc. are in the <install path>/Samples/Scripts folder. Copy over that entire Scripts directory as well into MyFirstGantt.

3) Sample JSON Data

Create a SampleData.json file containing a list of sample tasks to be displayed in the gantt.

SampleData.json content:

[{

"Name" : "Task 1",

"ID" : 1,

"StartTime" : "2012-02-02T00:00:00Z",

"Effort" : "8:00:00",

"Description" : "Description of Task 1"

{

"Name" : "Task 2",

"ID" : 2,

"PredecessorIndices" : "1",

"StartTime" : "2012-02-03T00:00:00Z",

"Effort" : "16:00:00",

"Description" : "Description of Task 2"

{

"Name" : "Task 3",

"ID" : 3,

"StartTime" : "2012-02-02T00:00:00Z",

"Effort" : "1.12:30:00",

"ProgressPercent" : 90,

"Description" : "Description of Task 3"

{

"Name" : "Child Task 1",

"ID" : 4,

"IndentLevel" : 1,

"StartTime" : "2012-02-03T00:00:00Z",

"Effort" : "8:00:00",

"ProgressPercent" : 75,

"Description" : "Description of Task 3/Child Task 1"

{

"Name" : "Child Task 2",

"ID" : 5,

"IndentLevel" : 1,

"PredecessorIndices" : "4+8",

"Description" : "Description of Task 3/Child Task 2"

{

"Name" : "Grand Child Task 1",

"ID" : 6,

"IndentLevel" : 2,

"StartTime" : "2012-02-03T00:00:00Z",

"Effort" : "8:00:00",

"Description" : "Description of Task 3/Child Task 1/Grand Child 1"

{

"Name" : "Grand Child Task 2",

"ID" : 7,

"IndentLevel" : 2,

"StartTime" : "2012-02-03T00:00:00Z",

"Effort" : "16:00:00",

"Description" : "Description of Task 3/Child Task 1/Grand Child 2"

{

"Name" : "Child Task 3",

"ID" : 8,

"IndentLevel" : 1,

"StartTime" : "2012-02-02T00:00:00Z",

"Effort" : "16:00:00",

"Description" : "Description of Task 3/Child Task 3"

{

"Name" : "Task 4",

"ID" : 9,

"StartTime" : "2012-02-02T00:00:00Z",

"Effort" : "00:00:00",

"ProgressPercent" : 60,

"Description" : "Description of Task 4"

{

"Name" : "Task 5",

"ID" : 10,

"StartTime" : "2012-02-02T00:00:00Z",

"Effort" : "8:00:00",

"PredecessorIndices" : "3+8",

"Description" : "Description of Task 5"

{

"Name" : "Child Task 1",

"ID" : 11,

"IndentLevel" : 1,

"StartTime" : "2012-02-02T00:00:00Z",

"Effort" : "16:00:00",

"Description" : "Description of Task 5/Child Task 1"

{

"Name" : "Child Task 2",

"ID" : 12,

"PredecessorIndices" : "11SS",

"IndentLevel" : 1,

"StartTime" : "2012-02-02T00:00:00Z",

"Effort" : "8:00:00",

"Description" : "Description of Task 5/Child Task 2"

{

"Name" : "Task 6",

"ID" : 13,

"StartTime" : "2012-02-02T00:00:00Z",

"Effort" : "1.16:00:00",

"Description" : "Description of Task 6"

{

"Name" : "Child Task 1",

"ID" : 14,

"IndentLevel" : 1,

"StartTime" : "2012-02-02T00:00:00Z",

"Effort" : "1.20:00:00",

"Description" : "Description of Task 6/Child Task 1"

{

"Name" : "Grand Child Task 1",

"ID" : 15,

"StartTime" : "2012-02-04T00:00:00Z",

"Effort" : "1.00:00:00",

"IndentLevel" : 2,

"Description" : "Description of Task 6/Child Task 2"

}]

4) HTML file including the Gantt Widget

Create a new HTML file inside the project directory (MyFirstGantt) and reference the following source files. Remember to link to the right version of the RadiantQ jQuery Gantt in the last reference below.

<head>

</head>

Initializing the Gantt Table

Now you have to setup the different column you want to show in the GanttTable. You can do so by defining a collection of column objects like below.

var columns = [

{

field: "Activity_M().ID_M()",

title: "ID",

iseditable: false,

width: 25

{

field: "Activity_M().ActivityName_M()",

title: "Activity Name",

width: 200,

editor: RadiantQ.Default.Template.ProjectGanttExpandableTextboxEditor(),

template: RadiantQ.Default.Template.ProjectGanttExpandableTextBlockTemplate()

{

field: "Activity_M().StartTime_M()",

title: "StartTime",

width: 150,

format: "MM/dd/yy",

editor: "<input data-bind='ActivityTimeBinder:Activity_M().StartTime_M' />"

{

field: "Activity_M().EndTime_M()",

title: "EndTime",

width: 150,

format: "MM/dd/yy",

cellalign: "center",

editor: "<input data-bind='value:Activity_M().EndTime_M' data-getvalueName='getDate' data-setvaluename='setDate' data-valueUpdate='onBlur' data-role=\"DateTimePicker\" />"

{

field: "Activity_M().Effort_M()",

title: "Effort",

format: "" /*to call the .toString()*/,

width: 100,

editor: "<input data-bind='value:Activity_M().Effort_M' ' data-role=\"DurationPicker\" />"

{

field: "Activity_M().ProgressPercent_M()",

title: "ProgressPercent",

width: 150,

editor: "<input data-bind='value:Activity_M().ProgressPercent_M' data-role=\"spinner\" data-options='{\"min\":0, \"max\": 100}' />"

{

field: "Activity_M().Assignments_M()",

title: "Resource",

iseditable: false,

template: '<div> ${ RadiantQ.Gantt.ValueConverters.ConverterUtils.GetResourcesText(data.Activity_M().Assignments_M(), false) } </div>',

width: 100

{

field: "Activity.PredecessorIndexString",

title: "PredecessorIndex",

isParentEditable: false,

template: "<div>${data.PredecessorIndexString || '' }</div>",

editor: "<input data-bind='value:PredecessorIndexString'/>",

width: 150

}];

Creating Gantt

Now include code to retrieve the json file you created above and then initialize the GanttControl widget binding it with the loaded data.

this.jsonData = null;

var self = this;

$.holdReady(true);

$.ajax({

type: "GET",

dataType: 'json',

url: 'SampleData.json',

converters:

{

"text json": function (data) {

//console.log(data);

return $.parseJSON(data, true

/*converts date strings to date objects*/

, true

/*converts ISO dates to local dates*/

);

}

success: function (data) {

self.jsonData = data;

$.holdReady(false);

}

});

$(document).ready(function () {

var anchorTime = new Date(2014, 01, 02, 00, 00, 00);

var $gantt_container = $("#gantt_container");

$gantt_container.GanttControl({

ProjectStartDate: anchorTime,

DataSource: self.jsonData,

GanttTableOptions:{

columns:columns

IDBinding: new RadiantQ.BindingOptions("ID"),

NameBinding: new RadiantQ.BindingOptions("Name"),

IndentLevelBinding: new RadiantQ.BindingOptions("IndentLevel"),

StartTimeBinding: new RadiantQ.BindingOptions("StartTime"),

EffortBinding: new RadiantQ.BindingOptions("Effort"),

PredecessorIndicesBinding: new RadiantQ.BindingOptions("PredecessorIndices"),

ProgressPercentBinding: new RadiantQ.BindingOptions("ProgressPercent"),

DescriptionBinding: new RadiantQ.BindingOptions("Description"),

GanttChartTemplateApplied: function (sender , args) {

var $GanttChart = args.element;

$GanttChart.GanttChart({ AnchorTime: anchorTime });

}

});

</script>

<body>

</body>

The content of your MyFirstGantt directory should look like this:

Src
Scripts
json file
html file

Open the FirstGanttSample.html in the browser and you should get this in the browser:

FirstGanttSample in browser

Finally, take a look at this topic that show how you can clean up the Src folder in your project to remove unnecessary files.

For a sample that shows how to persist changes back in the database, please browse to this topic on Persisting Changes.