RequireJS with dhtmlxgantt

pragyaditya · March 3, 2016, 6:26pm

Hi All,

I am looking for some sample code which uses RequireJS for AMD, and AngularJS to show the DHXgantt.

I am loading and running this file below from my GWT code and invoking the export method initGanttWidget from GWT using JSNI.
NGUIGantt.js
=============Begin of file=======================

/*global
awInclude,
console,
define,
navigator,
window,
document,
isBootstrapDebugEnabled,
*/

/**

@module js/NgUIGantt
*/
define(
[‘app’, ‘angular’, ‘jquery’, ‘dhxgantt’],
function (app, ngModule, $, gantt) {
‘use strict’;

 //This is check for CSS link  which is used by the gantt modules .
 var cssCheck = $("head:first > link").filter("[href='thinclient/lib/dhxgantt/dhxgantt.css']").length;
 if (cssCheck === 0) {
     /**
      * Include the CSS for 'dhxgantt' module.
      */
     var link = document.createElement("link");

     link.type = "text/css";
     link.rel = "stylesheet";
     link.href = "thinclient/lib/dhxgantt/dhxgantt.css";

     document.getElementsByTagName("head")[0].appendChild(link);
 }
 app.directive('dhxGantt', function() {
     return {
         restrict: 'A',
         scope: false,
         transclude: true,
         template: '<div ng-transclude></div>',

         link: function($scope, $element, $attrs, $controller) {
             //watch data collection, reload on changes
             $scope.$watch($attrs.data, function(collection) {
                 gantt.clearAll();
                 gantt.parse(collection, "json");
                 var jsonPretty = JSON.stringify(collection);  
                 console.log(jsonPretty);
             }, true);

             //size of gantt
             $scope.$watch(function() {
                 return $element[0].offsetWidth + "." + $element[0].offsetHeight;
             }, function() {
                 gantt.setSizes();
             });

             //init gantt
             gantt.init($element[0]);
         }
     };
 });
 
 function templateHelper($element) {
     var template = $element[0].innerHTML;
     return template.replace(/[\r\n]/g, "").replace(/"/g, "\\\"").replace(/\{\{task\.([^\}]+)\}\}/g, function(match, prop) {
         if (prop.indexOf("|") !== -1) {
             var parts = prop.split("|");
             return "\"+gantt.aFilter('" + (parts[1]).trim() + "')(task." + (parts[0]).trim() + ")+\"";
         }
         return '"+task.' + prop + '+"';
     });
 }
 
 app.directive('ganttColumnAdd', ['$filter', function($filter) {
     return {
         restrict: 'AE',
         terminal: true,
         link: function() {
             gantt.config.columns.push({
                 width: 45,
                 name: "add"
             });
         }
     };
 }]);
 app.controller('MainGanttCtrl', function($scope) {

     $scope.tasks = {
         data: [{
             id: 1,
             text: "MySchedule",
             start_date: "01-04-2013",
             duration: 18,
             order: 10,
             progress: 0.4,
             open: true
         }, {
             id: 2,
             text: "Task1",
             start_date: "02-04-2013",
             duration: 8,
             order: 10,
             progress: 0.6
         }, {
             id: 3,
             text: "Task2",
             start_date: "11-04-2013",
             duration: 8,
             order:10,
             progress: 0.6
         }, {
             id: 4,
             text: "Task3",
             start_date: "11-04-2013",
             duration: 8,
             order: 10,
             progress: 0.6
         }],
         links: [{
             id: 1,
             source: 1,
             target: 2,
             type: "1"
         }, {
             id: 2,
             source: 2,
             target: 3,
             type: "0"
         }, {
             id: 3,
             source: 3,
             target: 4,
             type: "0"
         }, {
             id: 4,
             source: 2,
             target: 5,
             type: "2"
         } ]
     };

 });
 var exports = {};
 
 /**
  * Initialize (i.e. 'bootstrap') the angular system and create an angular controller on a new 'child' of the
  * given 'parent' element.
  * 
  * @param {Element} parentElement - The DOM element the controller and 'inner' HTML content will be added to.
  *            <P>
  *            Note: All existing 'child' elements of this 'parent' will be removed.
  * 
  */
 exports.initGanttWidget = function( parentElement) {
     /**
      * Create an 'outer' <DIV> (to hold the given 'inner' HTML) and create the angular controller on it.
      * <P>
      * Remove any existing 'children' of the given 'parent'
      * <P>
      * Add this new element as a 'child' of the given 'parent'
      * <P>
      * Include the DOM elements into the AngularJS system for AW and set the callback API function.
      */
     var ctrlElement = $( '<div ng-controller="MainGanttCtrl"/>' );

     ctrlElement.html('<div dhx-gantt style="height:350px; width:100%;"><div>');


     $( parentElement ).empty();
     $( parentElement ).append( ctrlElement );

     awInclude( parentElement, ctrlElement );
 };

 return exports;

 // End RequireJS Define

});

===================End of file=========================================

I am getting the following errors when I load the above file.

Stanislav · March 10, 2016, 9:30am

Unfortunately, we don’t have such sample.
As far as I can see, there is no any conflicts between Gantt and RequireJs ( Gantt is not an AMD module, but it can be loaded by RequireJs as any other js lib )