RequireJS

RequireJS is an implementation of AMD (Asynchronous Module Definition), an API for declaring modules and loading them asynchronously when they are needed. RequireJS can help you organize your code with modules and will manage for you the asynchronous and parallel downloads of your files. Since scripts are loaded only when needed, it reduces the loading time of your page, which is great!

In this topic we discuss how to use the jQuery Gantt in a RequireJS project.

The discussion in this topic is illustrated in the ..\PatternSamples\RequireJS sample.

Create your project directory and structure it as you need. Ours looks like this,

├── Scripts

│ ├── app

│ │ ├── initGantt.js

│ │ └── main.js

│ └── libs

│ ├── GanttDeps

│ │ ├── jquery-ui-1.11.4

│ │ │ └── jquery-ui.min.js

│ │ ├── Utils

│ │ │ └── date.js

│ │ ├── jquery-1.11.2.min.js

│ │ └── jquery.layout-latest.min.js

│ ├── require.js

│ └── RadiantQ-jQuery.Gantt.5.0.trial.min.js

├── index.html

├── FlexyGanttSkeleton.json

├── localeStrings

│ └── en-US.js

└── css

├── External

├── Images

├── jQuery-ui-themes

├── VW.Grid.css

├── initGanttStyles.css

└── radiantq.gantt.default.css

In index.html, include code to:

"data-main Entry Point", The data-main attribute is a special attribute that require.js will check to start script loading. Take a look at this RequireJS Docs for more information about this.
The templates to implement the gantt.
The config object as the global variable required before require.js is loaded and have the values applied automatically. Add the RadiantQ and dependant files in this config object. Take a look at this RequireJS Doc for more information.

<head>

requirejs.config({

"baseUrl": "Scripts/app",

"paths": {

"jquery": "../libs/GanttDeps/jquery-1.11.2.min",

"jquery-ui": "../libs/GanttDeps/jquery-ui-1.11.4/jquery-ui.min",

"jquery.layout": "../libs/GanttDeps/jquery.layout-latest.min",

"dateJS": "../libs/GanttDeps/Utils/date",

"resourceString": "../../localeStrings/en-US",

"underscore": "../libs/underscore",

"backbone": "../libs/backbone",

"router": "../router",

"models": "../models/model",

"views": "../views/view",

"collections": "../collections/collection",

"VWGrid": "../libs/VW.Grid.1.min.js",

"RadiantQ": "../libs/RadiantQ-jQuery.Gantt.5.0.min.js"

"shim": {

"jquery-ui": ["jquery"],

"jquery.layout": ["jquery", "jquery-ui"],

"backbone": ["underscore"],

"router": ["backbone"],

"models": ["router", "RadiantQ"],

"collections": ["models"],

"views": ["collections"],

"RadiantQ": ["jquery", "jquery-ui", "jquery.layout", "dateJS", "resourceString", "VWGrid"]

}

});

</script>

</head>

The main.js should contain code that needs execute before initializing the Gantt, for example, "loading the ItemSource from json file".

var jsonData = [];

define(["RadiantQ"], function () {

$.ajax({

type: "GET",

dataType: 'json',

url: 'FlexyGanttSkeleton.json',

converters:

{

"text json": function (data) {

return $.parseJSON(data, true /*converts date strings to date objects*/, true /*converts ISO dates to local dates*/);

}

success: function (data) {

jsonData = data;

require(["app/initGantt"]);

}

});

In initGantt.js:

// Gantt widget initialization & related codes goes here.