Dear Community,
While I’m testing the functions of the dhtmlxGantt in Angular I currently have a problem.
I want to get milestones in the Gantt. Even if I copy the code from the demo (with different adjustments to angular) I get normal tasks shown instead of milestones.
Here’s my code:
module.directive('dhxGantt', function() {
return {
restrict: 'A',
scope: false,
transclude: true,
template: '<div ng-transclude></div>',
link:function ($scope, $element, $attrs, $controller){
$scope.$watch($attrs.data, function(collection){
gantt.clearAll();
gantt.parse(collection, "json");
}, true);
$scope.$watch(function() {
return $element[0].offsetWidth + "." + $element[0].offsetHeight;
}, function() {
gantt.setSizes();
});
gantt.init($element[0]);
}
}
});
module.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('gantt.dhtmlx', {
url: '/dhtmlx',
label: 'DHTMLX',
templateUrl: 'state/gantt/gantt.dhtmlx.html',
controller: 'ganttDhtmlxController',
});
}]);
module.controller('ganttDhtmlxController', [
'$scope',
'$mds',
'$filter',
ganttDhtmlxController
]);
function ganttDhtmlxController($scope,
$mds,
$filter) {
gantt.config.scale_unit = "month";
gantt.config.date_scale = "%F, %Y";
gantt.config.scale_height = 50;
gantt.config.types["customType"] = "type_id";
gantt.locale.labels['type_' + "customType"] = "New Type";
gantt.config.lightbox["customType" + "_sections"] = [
{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
{name: "type", type: "typeselect", map_to: "type"}
];
gantt.config.subscales = [
{unit:"day", step:1, date:"%j, %D" }
];
gantt.templates.rightside_text = function(start, end, task){
if(task.type == gantt.config.types.milestone){
return task.text;
}
return "";
};
gantt.config.lightbox.sections = [
{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
{name: "type", type: "typeselect", map_to: "type"},
{name: "time", type: "duration", map_to: "auto"}
];
$scope.tasks = {
"data":[
{"id":11, "text":"Project #1", type:gantt.config.types.project, "progress": 0.6, "open": true},
{"id":12, "text":"Task #1", "start_date":"03-04-2013", "duration":"5", "parent":"11", "progress": 1, "open": true},
{"id":13, "text":"Task #2", "start_date":"03-04-2013", type:gantt.config.types.project, "parent":"11", "progress": 0.5, "open": true},
{"id":14, "text":"Task #3", "start_date":"02-04-2013", "duration":"6", "parent":"11", "progress": 0.8, "open": true},
{"id":15, "text":"Task #4", type:gantt.config.types.project, "parent":"11", "progress": 0.2, "open": true},
{"id":16, "text":"Final milestone", "start_date":"15-04-2013", type:gantt.config.types.milestone, "parent":"11", "progress": 0, "open": true},
{"id":17, "text":"Task #2.1", "start_date":"03-04-2013", "duration":"2", "parent":"13", "progress": 1, "open": true},
{"id":18, "text":"Task #2.2", "start_date":"06-04-2013", "duration":"3", "parent":"13", "progress": 0.8, "open": true},
{"id":19, "text":"Task #2.3", "start_date":"10-04-2013", "duration":"4", "parent":"13", "progress": 0.2, "open": true},
{"id":20, "text":"Task #2.4", "start_date":"10-04-2013", "duration":"4", "parent":"13", "progress": 0, "open": true},
{"id":21, "text":"Task #4.1", "start_date":"03-04-2013", "duration":"4", "parent":"15", "progress": 0.5, "open": true},
{"id":22, "text":"Task #4.2", "start_date":"03-04-2013", "duration":"4", "parent":"15", "progress": 0.1, "open": true},
{"id":23, "text":"Mediate milestone", "start_date":"14-04-2013", type:gantt.config.types.milestone, "parent":"15", "progress": 0, "open": true}
],
"links":[
{"id":"10","source":"11","target":"12","type":"1"},
{"id":"11","source":"11","target":"13","type":"1"},
{"id":"12","source":"11","target":"14","type":"1"},
{"id":"13","source":"11","target":"15","type":"1"},
{"id":"14","source":"23","target":"16","type":"0"},
{"id":"15","source":"13","target":"17","type":"1"},
{"id":"16","source":"17","target":"18","type":"0"},
{"id":"17","source":"18","target":"19","type":"0"},
{"id":"18","source":"19","target":"20","type":"0"},
{"id":"19","source":"15","target":"21","type":"2"},
{"id":"20","source":"15","target":"22","type":"2"},
{"id":"21","source":"15","target":"23","type":"0"}
]
};
}Html:
<script src="../../../js/gantt/dhtmlxgantt.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../../css/dhtmlxgantt.css">
<div dhx-gantt data="tasks" style="height:550px; width:100%;"><div>I can’t find the Problem. This is the code of the demo with the testdata of the demo. The tasks and links are shown correctly. When I inspect the class of the task, that should be a milestone, it’s “gantt_task_line gantt_dependent_task”. This is wrong, this should be “gantt_milestone”, like in the Demo. It looks like the gantt is not looking at the type of the task. But i can’t find the Problem.
I would be really grateful for help!