In ASP.NET

Create a new ASP.NET project in Visual Studio:

VS 2012 :FILE --> New --> Project --> Visual C# --> Web --> ASP.NET Web Forms Application, create a project.

VS 2010 :FILE --> New --> Project --> Visual C# --> Web --> ASP.NET Web Application, create a project.

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) Create a sample Data Source(JSON Data)

You will typically use an Entity Model, ADO.NET, etc. to retrieve data from a database. But, to keep things simple, we will create a simple list of “projects” and return it to the client from the server.

Create a new type called Project and Task. In Solution Explorer right click on the Project name, then Add --> New Item --> class (call it project.cs) and define a class like below.

public class Project

{

public Project() { this.Tasks = new System.Collections.ObjectModel.ObservableCollection<Task>(); }

public string PName { get; set; }

public System.Collections.ObjectModel.ObservableCollection<Task> Tasks { get; set; }

public DateTime OverallStartTime { get; set; }

public DateTime OverallEndTime { get; set; }

}

public class Task

{

public string Status;

public string TaskName { get; set; }

public DateTime StartTime { get; set; }

public DateTime EndTime { get; set; }

public double Progress { get; set; }

public bool IsOverlapping { get; set; }

public object Tag { get; set; }

}

Then, add a new Generic handler to the project; this is going to provide the data source to the client page.

To add a Generic handler in the visual studio, in Solution Explorer right click on the Project name, then Add --> New Item --> Generic Handler, and create a new instance naming it, for example, FGTaskListHandler.ashx.

In the generic handler (FGTaskListHandler.ashx) create a list of TaskInfos, convert that list to a json using JavaScriptSerializer or any other “JSON serializer” to convert it to json data and add that to the Response.

public class FGTaskListHandler : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

DateTime dtS = DateTime.Now;

System.Collections.ObjectModel.ObservableCollection<Project> projects = new System.Collections.ObjectModel.ObservableCollection<Project>();

Project prj = new Project() { PName = "Project1", OverallStartTime = dtS + TimeSpan.FromDays(1), OverallEndTime = dtS + TimeSpan.FromDays(6) };

prj.Tasks.Add(new Task() { StartTime = dtS, EndTime = dtS + TimeSpan.FromDays(2), TaskName = "John's Task 3", Progress = 20 });

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(3), EndTime = dtS + TimeSpan.FromDays(4), TaskName = "John's Task 2", Progress = 50 });

projects.Add(prj);

prj = new Project() { PName = "Project2", OverallStartTime = dtS + TimeSpan.FromDays(1.5), OverallEndTime = dtS + TimeSpan.FromDays(5.5) };

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(1), EndTime = dtS + TimeSpan.FromDays(4), TaskName = "Victor's Task", Progress = 20 });

projects.Add(prj);

prj = new Project() { PName = "Project3", OverallStartTime = dtS + TimeSpan.FromDays(2), OverallEndTime = dtS + TimeSpan.FromDays(5) };

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(1), EndTime = dtS + TimeSpan.FromDays(4), TaskName = "Jason's Task 1", Progress = 20 });

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(7), EndTime = dtS + TimeSpan.FromDays(9), TaskName = "Jason's Task 2", Progress = 70 });

projects.Add(prj);

prj = new Project() { PName = "Project4", OverallStartTime = dtS + TimeSpan.FromDays(0.5), OverallEndTime = dtS + TimeSpan.FromDays(3.5) };

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(1.5), EndTime = dtS + TimeSpan.FromDays(4), TaskName = "Vicky's Task", Progress = 20 });

projects.Add(prj);

prj = new Project() { PName = "Project5", OverallStartTime = dtS + TimeSpan.FromDays(2), OverallEndTime = dtS + TimeSpan.FromDays(6) };

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(2.2), EndTime = dtS + TimeSpan.FromDays(3.8), TaskName = "Oleg's Task 1", Progress = 50 });

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(5), EndTime = dtS + TimeSpan.FromDays(6), TaskName = "Oleg's Task 2", Progress = 50 });

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(8), EndTime = dtS + TimeSpan.FromDays(9.6), TaskName = "Oleg's Task 3", Progress = 20 });

projects.Add(prj);

prj = new Project() { PName = "Project6", OverallStartTime = dtS + TimeSpan.FromDays(2.5), OverallEndTime = dtS + TimeSpan.FromDays(4.5) };

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(0.8), EndTime = dtS + TimeSpan.FromDays(2), TaskName = "Kim's Task", Progress = 90 });

projects.Add(prj);

prj = new Project() { PName = "Project7", OverallStartTime = dtS + TimeSpan.FromDays(5), OverallEndTime = dtS + TimeSpan.FromDays(7.5) };

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(1.5), EndTime = dtS + TimeSpan.FromDays(4), TaskName = "Balaji's Task 1", Progress = 20 });

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(5), EndTime = dtS + TimeSpan.FromDays(8), TaskName = "Balaji's Task 2", Progress = 70 });

projects.Add(prj);

prj = new Project() { PName = "Project8", OverallStartTime = dtS + TimeSpan.FromDays(3), OverallEndTime = dtS + TimeSpan.FromDays(6.3) };

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(1.75), EndTime = dtS + TimeSpan.FromDays(2.25), TaskName = "Li's Task", Progress = 20 });

projects.Add(prj);

prj = new Project() { PName = "Project9", OverallStartTime = dtS + TimeSpan.FromDays(2), OverallEndTime = dtS + TimeSpan.FromDays(6) };

prj.Tasks.Add(new Task() { StartTime = dtS + TimeSpan.FromDays(2), EndTime = dtS + TimeSpan.FromDays(3), TaskName = "Stacy's Task", Progress = 50 });

projects.Add(prj);

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

context.Response.Write(serializer.Serialize(projects));

}

public bool IsReusable

{

get

{

return false;

}

4) ASPX file including the Gantt Widget

Create the .aspx sample file

In the visual studio SolutionExplorer right click on the Project name, then Add --> New Item --> Web Form(call it WebForm1.aspx).

Include the following namespace in the created aspx.

<%@ Register Assembly="RadiantQ.Web.JQGantt" Namespace="RadiantQ.WebForms.JQGantt" TagPrefix="RQ" %>

Add the RadiantQ.Web.JQGantt.dll to your project reference, you can find the dll here: <install folder>\Src\bin\DotNET4MVC4\RadiantQ.Web.JQGantt.dll.

Reference the following source files in the aspx inside the <head> tag. Remember to link to the right version of the RadiantQ jQuery Gantt in the last one line reference below.

</head>

Creating FlexyGantt

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

In the WebForm1.aspx, within the default <form> tag in <body>, add this tag:

<body>

<RQ:FlexyGantt runat="server" ID="gantt" Height="500"

DataSourceUrl="FGTaskListHandler.ashx"

HierarchyResolverFunction="ResolverFunction"

TaskStartTimeProperty="StartTime"

TaskEndTimeProperty="EndTime"

TaskItemTemplate="<div class='rq-gc-taskbar'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div></div>"

ParentTaskItemTemplate="<div class='rq-gc-parentBar'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div><div class='parentLeftPoly-style'></div><div class='parentMiddleBar-style'></div><div class='rq-gc-parentBar-rightCue'></div></div>"

ParentTaskEndTimeProperty="OverallEndTime"

ParentTaskStartTimeProperty="OverallStartTime" />

<div>

</div>

</form>

</body>

Initializing the Gantt Table

Now you have to setup the different columns you want to show in the GanttTable. You can do so by defining columns inside GanttTableOptions property in GanttControl.

<RQ:FlexyGantt runat="server" ID="gantt" Height="500"

DataSourceUrl="../../DataSources/FGTaskListHandler.ashx"

HierarchyResolverFunction="ResolverFunction"

TaskStartTimeProperty="StartTime"

TaskEndTimeProperty="EndTime"

TaskItemTemplate="<div class='rq-gc-taskbar'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div></div>"

ParentTaskItemTemplate="<div class='parentBar-style' ><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div><div class='rq-gc-parentBar-leftCue'></div><div class='rq-gc-parentBar-middle'></div><div class='rq-gc-parentBar-rightCue'></div></div>"

ParentTaskEndTimeProperty="OverallEndTime"

ParentTaskStartTimeProperty="OverallStartTime">

<GanttBase:Column field="Name" title="Name" clientTemplate="flexyGanttNameColumnTemplate" clientEditorTemplate="flexyGanttExpandableTextBoxEditor"></GanttBase:Column>

</Columns>

</GanttTableOptions>

</RQ:FlexyGantt>

<div class="rq-grid-expander-text"> ${nameConverter(data)} </div>

</script>

</script>

The gantt is now fully setup to display Projects returned from the ashx handler.

Converters Functions

Here are some converter functions that provide value to FlexyGantt from the bound objects.

//to resolve the hierarchical data source.

function ResolverFunction(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['PName'] != undefined) {

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

if ($.isFunction(data['Tasks']))

return data['Tasks']();

else

return data['Tasks'];

}

else

// Return an empty array to keep this a collapsible parent with no children. Return null to make this a leaf node.

return new Array();

}

return null;

}

//To resolve the hierarchical data source.

nameConverter = function (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["PName"])

return data["PName"];

else if (data["TaskName"])

return data["TaskName"];

return;

}

</script>

The gantt is now fully setup to display tasks returned from the ashx handler.

Make WebForm1.aspx the "Start Page". You can do so by right-clicking on this file in Solution Explorer and selecting "Set as Start Page".

Here is the resultant gantt:

Sample 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.