A directive which will maintain dhtmlx gantt in angularjs
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Latest commit 2c4d5e7 Aug 24, 2016 @anik123 committed on GitHub Update README.md
Permalink
Failed to load latest commit information.
app First Commit Dec 11, 2015
lib First Commit Dec 11, 2015
.gitattributes 💥🐫 Added .gitattributes Dec 11, 2015
Index.html First Commit Dec 11, 2015
README.md Update README.md Aug 24, 2016

README.md

Dhtmlx Gantt Directive in angularjs

A directive which will maintain dhtmlx gantt in angularjs.

What is Dhtmlx Gantt ?

dhtmlxGantt is an open source JavaScript Gantt chart that helps you visualize a project schedule in a nice-looking chart. It can show the dependencies between tasks as lines and allows you to set up different relationships between tasks (finish-to-start, start-to-start, end-to-end). dhtmlxGantt provides flexible API and a large number of event handles, which gives you the freedom to customize it for your needs.

Settings

This directive's scope is isolated.

This is the config object which will be passed from controler.

$scope.granttConfig = {
    dataSource: $scope.tasks,
    config: {
        columns: columnConfig,
        show_chart: true
    }
}

Html binding

<div ng-grantt="granttConfig" action="action($data,$action)"></div>

Action method

$scope.action = function($data, $action) {
    console.log($data);
    console.log($action);
}
  • $data will send selected object
  • $action will send performed action (Add,Edit,Delete)

Data Design of dhtmlx grantt is

$scope.tasks = {
    data: [{
        id: 1,
        text: "Project #2",
        start_date: "01-04-2013",
        duration: 18,
        tree: true
    }, {
        id: 2,
        text: "Task #1",
        start_date: "02-04-2013",
        duration: 8,
        progress: 0.6,
        parent: 1
    }, {
        id: 3,
        text: "Task #2",
        start_date: "11-04-2013",
        duration: 8,
        progress: 0.6,
        parent: 1
    }],
    links: [{
        id: 1,
        source: 1,
        target: 2,
        type: 1
    }, {
        id: 2,
        source: 2,
        target: 3,
        type: 0
    }]
};

In tasks object's data property will hold infomation of data and link property will hold information of link between the tasks in the chart.

In directive , configuration are used from dhtmlx gantt docs.

var config = $scope.ngGrantt.config || {}; // setting config 
gantt.config.show_task_cells = false;
gantt.config.autofit = true;
gantt.config.readonly = typeof config.readonly == "undefined" ? true : config.readonly;
gantt.config.show_progress = typeof config.show_progress == "undefined" ? false : config.show_progress;
gantt.config.show_chart = typeof config.show_chart == "undefined" ? false : config.show_chart;
gantt.config.show_grid = typeof config.show_grid == "undefined" ? true : config.show_grid;
gantt.config.open_tree_initially = typeof config.open_tree_initially == "undefined" ? true : config.open_tree_initially;

Demo

  • Dhtmlx Gantt without chart

Without chart

  • Dhtmlx Gantt with chart

With chart