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 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 “tasks” and return it to the client from the server.

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

public class TaskInfo

{

public string Name { get; set; }

public int IndentLevel { get; set; }

public DateTime StartTime { get; set; }

public string Effort { get; set; }

public double ProgressPercent { get; set; }

public string Resources { get; set; }

public int ID { get; set; }

public string PredecessorIndices { get; set; }

public int SortOrder { get; set; }

public string Description { get; set; }

public object Tag { get; set; }

public int Priority { get; set; }

public DateTime PlannedStartTime { get; set; }

public DateTime PlannedEndTime { get; set; }

public double Cost { get; set; }

public DateTime EndTime { 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, DataHandler.ashx.

In the generic handler (DataHandler.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 DataHandler : IHttpHandler

{

DateTime dt = DateTime.Today;

public void ProcessRequest(HttpContext context)

{

List<TaskInfo> taskItems = new List<TaskInfo>

{

new TaskInfo { Name = "Task 1", ID = 1, StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 1" },

new TaskInfo { Name = "Child Task 1", ID = 2,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), Description = "Description of Task 2" },

new TaskInfo { Name = "Task 3", ID = 3, StartTime =dt, Effort=TimeSpan.FromDays(4).ToString(), Description = "Description of Task 3" },

new TaskInfo { Name = "Child Task 1", ID = 4,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(3).ToString(), Description = "Description of Task 4" },

new TaskInfo { Name = "Child Task 2", ID = 5, IndentLevel=2, StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 5" },

new TaskInfo { Name = "Task 6", ID = 6, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), Description = "Description of Task 6" },

new TaskInfo { Name = "Task 7", ID = 7, StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 7" },

new TaskInfo { Name = "Child Task 1", ID = 8,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), PredecessorIndices="6+2" }

};

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

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

}

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 Gantt

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:GanttControl ID="gantt" DataSourceUrl="DataHandler.ashx" Height="500px" runat="server"/>

<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:GanttControl ID="gantt" DataSourceUrl="DataHandler.ashx" Height="500px" runat="server">

<GanttBase:Column field="Activity.ID" width="25" title="ID" iseditable="false"></GanttBase:Column>

<GanttBase:Column field="Activity.ActivityName" width="200" title="Activity Name" clientTemplate="projectGanttNameTemplate" clientEditorTemplate="projectGanttNameEditor"></GanttBase:Column>

<GanttBase:Column field="Activity.StartTime" width="100" title="StartTime" format="MM/dd/yy" clientEditorTemplate="startTimeEditor"></GanttBase:Column>

<GanttBase:Column field="Activity.EndTime" width="100" title="EndTime" format="MM/dd/yy" clientEditorTemplate="endTimeEditor"></GanttBase:Column>

<GanttBase:Column field="Activity.Effort" width="100" title="Effort" format="" clientEditorTemplate="effortEditor"></GanttBase:Column>

<GanttBase:Column field="Activity.ProgressPercent" width="100" title="ProgressPercent" clientEditorTemplate="progressEditor"></GanttBase:Column>

<GanttBase:Column field="Activity.Assignments" width="100" title="Resource" iseditable="false" clientTemplate="resourceTemplate"></GanttBase:Column>

<GanttBase:Column field="Activity.PredecessorIndexString" width="100" title="Predecessor Index" clientEditorTemplate="predecessorEditor" clientTemplate="predecessorTemplate" isParentEditable="false"></GanttBase:Column>

</Columns>

</GanttTableOptions>

</RQ:GanttControl>

<%-- Column Template--%>

</div>

<div class="rq-grid-expander-text">${data.Activity.ActivityName}</div>

</script>

<div>${data.PredecessorIndexString_M() || '' }</div>

</script>

<%--Column Editors --%>

</script>

</script>

</script>

</script>

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

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