RadiantQ jQuery Gantt Package
In Typescript
Previous Topic  Next Topic 

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:

[{

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

    <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/Utils/date.js" type="text/javascript"></script>

    <script src="Src/ResourceStrings/en-US.js" type="text/javascript"></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.



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.

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

</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 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 that show how you can clean up the Src folder in your project to remove unnecessary files.


© RadiantQ 2022. All Rights Reserved.