In ASP.NET MVC

Create a new ASP.NET MVC project in Visual Studio:

FILE --> New --> Project --> ASP.NET MVC 4 Web Application -> select Internet Application(Select Razor Engine)

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; }

}

Create a sample Data Source

Prepare a sample list of the above TaskInfo instances that represents the tasks in a project. This method must be inside the HomeController class( Controllers/HomeController.cs)

public class HomeController : Controller

{

public ActionResult GetProjectGanttItemsource()

{

DateTime dt = DateTime.Today;

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" }

};

return this.Json(taskItems, JsonRequestBehavior.AllowGet);

}

4) RadiantQ Assembly and Script References

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. (Or use the MVC3 equivalent)

In your _Layout.cshtml, include the following script and css references required by the gantt:

Remember to link to the right version of the jquery Gantt package in the last but one line reference below.

Also make sure you are not including the jQuery file in _Layout.cshtml (since we are referencing it above). By default the jQuery file including line look likes this in _Layout.cshtml,

@Scripts.Render("~/bundles/jquery")

And finally, include the following namespaces in Web.config within the existing System.Web tag as follows

<System.Web>

<pages>

</namespaces>

</pages>

</System.Web>

</configuration>

5) CSHTML file including the Gantt Widget

Create the .cshtml sample file

In the visual studio right click on the views --> Home folder and Add --> View ( call it as view1.cshtml)

And Include this Following namespaces in your cshtm page.

@using RadiantQMVC

@using RadiantQ.Web.JQGantt;

@using RadiantQ.Web.JQGantt.Common

Creating GanttControl

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

(This could be added right at the bottom of the newly created cshtm file)

@Html.JQProjectGantt(

new JQProjectGanttSettings()

{

ControlId = "gantt_container",

DataSourceUrl = new Uri("/Home/GetProjectGanttItemsource", UriKind.RelativeOrAbsolute),

Options = new ProjectGanttOptions()

{

IDBinding= new Binding("ID"),

NameBinding = new Binding("Name"),

IndentLevelBinding = new Binding("IndentLevel"),

StartTimeBinding = new Binding("StartTime"),

EffortBinding = new Binding("Effort"),

PredecessorIndicesBinding= new Binding("PredecessorIndices"),

ProgressPercentBinding= new Binding("ProgressPercent"),

DescriptionBinding= new Binding("Description")

}

})

</div>

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 GanttTableOptions as shown below.

(Only copy over the GanttTableOptions related code from below to the already copied over JQProjectGanttSettings code).

@Html.JQProjectGantt(

new JQProjectGanttSettings()

{

ControlId = "gantt_container",

DataSourceUrl = new Uri("/Home/GetProjectGanttItemsource", UriKind.RelativeOrAbsolute),

Options = new ProjectGanttOptions()

{

GanttTableOptions = new GanttTableOptions()

{

Columns = new Columns(){

new Column(){

field= "Activity.ID",

title= "ID",

width= 40,

iseditable=false

new Column(){

field= "Activity.ActivityName",

title= "Name",

width= 200,

clientEditorTemplate= "projectGanttNameEditor",

clientTemplate = "projectGanttNameTemplate"

new Column(){

field= "Activity.StartTime",

title= "StartTime",

width= 150,

format= "MM/dd/yy",

cellalign= "center",

editor= "<input data-bind='ActivityTimeBinder:Activity.StartTime' data-getvalueName='getDate' data-setvaluename='setDate' data-valueUpdate='onClose' data-role=\"DateTimePicker\" />"

new Column(){

field= "Activity.EndTime",

title= "EndTime",

width= 150,

format= "MM/dd/yy",

cellalign= "center",

editor= "<input data-bind='value:Activity.EndTime' data-getvalueName='getDate' data-setvaluename='setDate' data-valueUpdate='onClose' data-role=\"DateTimePicker\" />"

new Column(){

field= "Activity.Effort",

title= "Effort",

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

width= 100,

editor= "<input data-bind='value:Activity.Effort' style='height:18px' data-role=\"DurationPicker\" />"

new Column(){

field= "Activity.ProgressPercent",

title="ProgressPercent",

width= 100,

editor= "<input style='height:18px' data-bind='value:Activity.ProgressPercent' data-role=\"spinner\" data-options='{\"min\":0, \"max\": 100}' />"

new Column(){

field= "Activity.Assignments",

title= "Resource",

iseditable=false,

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

editor= "<input data-bind='ResourcePickerBinder:Activity.Assignments' />",

width= 200

new Column(){

field= "Activity.PredecessorIndexString",

title= "PredecessorIndices",

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

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

width= 150

}

IDBinding= new Binding("ID"),

NameBinding = new Binding("Name"),

IndentLevelBinding = new Binding("IndentLevel"),

StartTimeBinding = new Binding("StartTime"),

EffortBinding = new Binding("Effort"),

PredecessorIndicesBinding= new Binding("PredecessorIndices"),

ProgressPercentBinding= new Binding("ProgressPercent"),

DescriptionBinding= new Binding("Description")

}

})

Finally, define the following templates used in the Name column definition.

</div>

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

</script>

</div>

</script>

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

Create a ActionResult in Homecontroller that will return your page as view

public ActionResult View1()

{

return View("View1");

}

In App_Start/RouteConfig.cs change the routes action to "View1" (to make it your default View)

routes.MapRoute(

name: "Default",

url: "{controller}/{action}/{id}",

defaults: new { controller = "Home", action = "View1", id = UrlParameter.Optional }

);

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.