How to create a new ASP.NET project in Visual Studio

jQuery Gantt Package is a true cross-platform, based on HTML5 / jQuery local implementation, with 2 different gantt widgets, which can meet all your gantt-based visualization needs. It also comes with ASP.NET WebControl and MVC extensions, which can be easily integrated into existing applications.

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 interface to help you develop your web applications, just like other type-safe languages, with compile-time checking.

1) Gantt Widget source code JS file

First, you need the JS source files required by the Gantt widget. These files are in the <installation path>/Src folder. Copy this folder to the Project folder above (although the size of this folder is very large, but it contains all the CSS required by Themes, locales, etc., not all CSS will be loaded into your page ).

Continue to delete the bin folder in the Src folder.

Then click the "Show All Files" toolbar item in the project's solution explorer to display the newly included Src folder and include it in the project.

2) Sample of practical JS file

Some JS files with useful functions can be edited in-line in the grid. These files are in the <install path>/Samples/Scripts folder. Copy the contents of the Scripts folder in the above installation path to the Scripts folder in your project folder (when you create a new project, a Scripts folder will be automatically created in the project folder).
Then follow the steps in the previous step to include the newly added script file into your project.
How to create a new ASP.NET project in Visual Studio

3) JSON data sample

Create a SampleData.json file that contains a list of sample tasks to be displayed in the Gantt chart.

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 containing Gantt widget

Create a new HTML file in your project and reference the following source files. Remember to link to the correct version of RadiantQ jQuery Gantt in the last quote below.
<head>
<title></title>
<link href="Src/Styles/jQuery-ui-themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="Src/Styles/radiantq .gantt.default.css" rel="stylesheet" />
<link href="Src/Styles/VW.Grid.css" rel="stylesheet" />
<script src="Src/Scripts/jquery-1.11.2 .min.js" type="text/javascript"></script>
<script src="Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="Src/Scripts/jquery.layout-latest.min.js"></script>
<

<script src='Src/Scripts/VW.Grid.1.min.js' type='text/javascript'></script>
<script src='Src/Scripts/RadiantQ-jQuery.gantt.5.0.trial.min.js' type='text/javascript'></script>
</head>

<body>
<div id="pagecontent" style="height: 600px;">
<div id="gantt_container" style="height: 100%;">
</div>
</div>
</body>

5) TypeScript file

In your project, add a new TypeScript file (myApp.ts) next to the HTML and reference the result js in the HTML.

<head>
other script fils.
<script src=myApp.js type='text/javascript'></script>
</head>

6) Create a Ganttcontrol widget in 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 columns = [
{
field: "Activity_M().ID_M()",
title: "ID",
width: 20
},
{
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: 100,
format: "MM/dd/yy",
cellalign: "center",
editor: "<input data-bind=' ValueBinder.ActivityTimeBinder:Activity_M().StartTime_M' />"
},
{
field: "Activity_M().EndTime_M()",
title: "EndTime",
width: 100,
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' style='height:18px' data-role=\"DurationPicker\" />"
},
{
field: "Activity_M().ProgressPercent_M()",
title: "ProgressPercent",
width: 100,
editor: "<input style='height:18px' data-bind='value:Activity_M().ProgressPercent_M' data-role=\"spinner\" data-options='{\"min\":0, \"max\": 100}' />"
},
{
field: "Activity_M().Assignments_M()",
title: "Assignments",
iseditable: false,
template: '<div> ${ RadiantQ.Gantt.ValueConverters.ConverterUtils.GetResourcesText(data.Activity_M().Assignments_M(), false) } </div>',
width: 200
},
{
field: "Activity_M().PredecessorIndexString_M()",
title: "PredecessorIndex",
template: "<div>${data.PredecessorIndexString || '' }</div>",
editor: "<input data-bind='value:PredecessorIndexString'/>",
width: 150
}
];
var ganttControl: GanttControl;
var anchorTime = datasourcejson[0].StartTime["clone"]();
var $gantt_container = $('#gantt_container');
$gantt_container.GanttControl({
ProjectStartDate: anchorTime,
DataSource: datasourcejson,
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"),
    TimeRangeHighlightBehavior: RadiantQ.Gantt.TimeRangeHighlightBehavior.HighlightInChartOnHeaderMouseHover,
    GanttChartTemplateApplied: function (sender , args) {
        ganttControl = <GanttControl>$gantt_container.data("GanttControl");
        var $ganttChart = args.element;
        $ganttChart.GanttChart({ AnchorTime: anchorTime });
    }
});

};
Finally, take a look at this topic and tell you how to clean up the Src folder in the project and delete unnecessary files.

Guess you like

Origin blog.51cto.com/15078157/2634222