In TypeScript

Create a new ASP.NET project in Visual Studio:

VS 2012 :FILE --> New --> Project --> Installed--> Templates --> Other Language -> TypeScript, create a project.

The Gantt Package includes the necessary Gantt TypeScript interfaces to help you develop your Web application just like any other Type-Safe language with compile time checks.

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. Copy over this folder into the above Project folder (though this folder is very big in size, it contains the required CSS, etc for all Themes, locales, etc. and not all of them will be loaded inside your page).

Go ahead and remove the bin folder inside this Src folder.

Then in the project's Solution Explorer click on the "Show All Files" toolbar item to show this newly included Src folder and include that in the project.

include Src folder in project

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 the contents of the Scripts folder from the above install path into the Scripts folder in your project folder (when you create a new project a Scripts folder would be automatically created in your project folder).

Then include the newly added Script files into your project following the same procedure as in the previous step.

3) Sample JSON Data

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

SampleData.json content:

[{

"TName" : "Team1",

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

"PEndTime" : "2012-04-18T00:00:00Z",

"Resources" : [{

"RName" : "JohnH",

"PStartTime" : "2012-04-04T00:00:00Z",

"PEndTime" : "2012-04-15T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

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

"EndTime" : "2012-04-12T00:00:00Z",

"Progress" : 20

}]

{

"RName" : "VictorG",

"PStartTime" : "2012-04-06T00:00:00Z",

"PEndTime" : "2012-04-18T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

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

"EndTime" : "2012-04-18T00:00:00Z",

"Progress" : 20

}]

{

"RName" : "JasonS",

"PStartTime" : "2012-04-06T00:00:00Z",

"PEndTime" : "2012-04-18T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

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

"EndTime" : "2012-04-12T00:00:00Z",

"Progress" : 20

{

"TaskName" : "Task 2",

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

"EndTime" : "2012-04-18T00:00:00Z",

"Progress" : 70

}]

{

"TName" : "Team2",

"PStartTime" : "2012-04-10T00:00:00Z",

"PEndTime" : "2012-04-20T00:00:00Z",

"Resources" : [{

"RName" : "BalajiN",

"PStartTime" : "2012-04-08T00:00:00Z",

"PEndTime" : "2012-04-18T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

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

"EndTime" : "2012-04-20T00:00:00Z",

"Progress" : 20

}]

{

"RName" : "LiM",

"PStartTime" : "2012-04-12T00:00:00Z",

"PEndTime" : "2012-04-18T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

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

"EndTime" : "2012-04-19T00:00:00Z",

"Progress" : 90

}]

{

"RName" : "StacyH",

"PStartTime" : "2012-04-05T00:00:00Z",

"PEndTime" : "2012-04-20T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

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

"EndTime" : "2012-04-12T00:00:00Z",

"Progress" : 20

}]

4) HTML file including the Gantt Widget

Create a new HTML file in your project 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>

<body>

</div>

<div align='center'>Name: ${nameConverter()}</div>

<div>

<span > StartTime : ${startTimeTooltipConverter()}

</span></br>

<span >EndTime : ${endTimeTooltipConverter()}

</span>

</div>

</script>

</body>

5) TypeScript file.

Add a new TypeScript file(myApp.ts) next to that HTML in your project and refer the resultant js in html.

<head>

other script fils.

</head>

6) Create Ganttcontrol widget inside the TypeScript file.

$.ajax({

type: "GET",

dataType: 'json',

url: 'GanttControlSkeleton.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) {

loadGantt(data);

}

});

function loadGantt(datasourcejson) {

var anchorTime = self.jsonData[0].PStartTime.clone();

var columns = [

{

field: "Name",

title: "Name",

editor: RadiantQ.Default.Template.FlexyGanttExpandableTextBoxEditor("FlexyGanttSkeleton_nameConverter"),

template: RadiantQ.Default.Template.FlexyGanttExpandableTextBlockTemplate("FlexyGanttSkeleton_nameConverter")

}];

// The template that defines the look for the task bars. "rq-gc-taskbar" is a built-in style that defines a default look for the task bars.

var tTemplate = "<div class='rq-gc-taskbar'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div></div>";

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

// Initialize the FlexyGantt widget.

$gantt_container.FlexyGantt({

DataSource: self.jsonData,

//the FlexyGantt is bound to resolve the hierarchy of Team/Resources/Tasks.

resolverFunction: function (data) {

// If data is wrapped by KO, then data itself could be a function and so we pick the object from the function.

if ($.isFunction(data)) {

data = data()[0];

}

if (data["Resources"] != undefined) {

if ($.isFunction(data["Resources"]))

return data["Resources"]();

else

return data["Resources"];

}

else if (data["RName"] != undefined) {

if (data["Tasks"] != undefined) {

return null;

}

else

return new Array();

}

return null;

GanttTableOptions: {

columns: columns

TaskStartTimeProperty: "StartTime",

ParentTaskStartTimeProperty: "PStartTime",

TaskItemTemplate: tTemplate,

ParentTaskItemTemplate: pTemplate,

TaskEndTimeProperty: "EndTime",

ParentTaskEndTimeProperty: "PEndTime",

TasksListProperty: "Tasks",

TaskTooltipTemplate: $("#TaskTooltipTemplate").html()

});

}

function nameConverter(flexyNodeData) {

var data;

// The grid calls this converter with flexyNodeData as a arg.

if (flexyNodeData)

data = flexyNodeData.Data();

// The grid calls this converter with flexyNodeData as a datacontext.

else

data = this.data;

if (data["TName"])

return data["TName"];

else if (data["RName"])

return data["RName"];

else if (data["TaskName"])

return data["TaskName"];

return;

};

// to get the short time format.

var toolTipDateformat = Date.CultureInfo.formatPatterns.shortDate + ' ' + "HH:mm:ss";

function startTimeTooltipConverter() {

if (this.data["PStartTime"])

return this.data["PStartTime"].toString(toolTipDateformat);

else if (this.data["StartTime"])

return this.data["StartTime"].toString(toolTipDateformat);

return null;

}

function endTimeTooltipConverter() {

if (this.data["PEndTime"])

return this.data["PEndTime"].toString(toolTipDateformat);

else if (this.data["EndTime"])

return this.data["EndTime"].toString(toolTipDateformat);

return null;

}

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