Critical path in Vue Gantt component

11 Jun 202410 minutes to read

The critical path in a project is indicated by a single task or a series of tasks. If a task in critical path is delayed, the entire project will be delayed. A task is considered to be critical if any delay to this task would affect the project end date.

The critical path can be enabled in Gantt by using the built-in toolbar button or enableCriticalPath property.

The following code example shows how to display the critical path in the Gantt control:

Composition API (~/src/App.vue)

<template>
  <div>
    <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
      :holidays="holidays" :enableCriticalPath="true" :editSettings="editSettings"></ejs-gantt>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { GanttComponent as EjsGantt, CriticalPath, Edit, Toolbar } from "@syncfusion/ej2-vue-gantt";
import { projectNewData } from './data-source.js';
const data = projectNewData;
const height = '450px';
const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  duration: 'Duration',
  progress: 'Progress',
  child: 'subtasks'
}
const editSettings = {
  allowAdding: true,
  allowEditing: true,
  allowDeleting: true,
  allowTaskbarEditing: true,
  showDeleteConfirmDialog: true
}
const toolbar = ['CriticalPath'];
provide('gantt', [CriticalPath, Edit, Toolbar]);
</script>

Options API (~/src/App.vue)

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :holidays = "holidays" :enableCriticalPath="true" :editSettings="editSettings"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, CriticalPath,Edit,Toolbar } from "@syncfusion/ej2-vue-gantt";
import { projectNewData  } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        data: projectNewData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        editSettings: {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
            },
        toolbar: ['CriticalPath'],
      };
  },
  provide: {
      gantt: [CriticalPath, Edit, Toolbar]
  }
};
</script>

Customize taskbar in critical path

11 Jun 202410 minutes to read

The taskbar in critical path can be customized by using queryTaskbarInfo event and isCritical property of row data in the event argument.

The following code example shows how to customize the critical path taskbar in the Gantt control:

Composition API (~/src/App.vue)

<template>
    <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
            :queryTaskbarInfo="queryTaskbarInfo" :holidays="holidays" :enableCriticalPath="true"
            :editSettings="editSettings"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { GanttComponent as EjsGantt, CriticalPath, Edit, Toolbar } from "@syncfusion/ej2-vue-gantt";
import { projectNewData } from './data-source.js';
const data = projectNewData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
};
const toolbar = ['CriticalPath'];
const queryTaskbarInfo = function (args) {
    if ((args.data.isCritical || args.data.slack === '0 day') && !args.data.hasChildRecords) {
        args.taskbarBgColor = 'rgb(242, 210, 189)';
        args.progressBarBgColor = 'rgb(201, 169, 166)';
    }
}
provide('gantt', [CriticalPath, Edit, Toolbar]);
</script>

Options API (~/src/App.vue)

<template>
    <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
            :queryTaskbarInfo="queryTaskbarInfo" :holidays="holidays" :enableCriticalPath="true"
            :editSettings="editSettings"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, CriticalPath, Edit, Toolbar } from "@syncfusion/ej2-vue-gantt";
import { projectNewData } from './data-source.js';
export default {
    name: "App",
    components: {
        "ejs-gantt": GanttComponent
    },
    data: function () {
        return {
            data: projectNewData,
            height: '450px',
            taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                duration: 'Duration',
                progress: 'Progress',
                child: 'subtasks'
            },
            editSettings: {
                allowAdding: true,
                allowEditing: true,
                allowDeleting: true,
                allowTaskbarEditing: true,
                showDeleteConfirmDialog: true
            },
            toolbar: ['CriticalPath'],
            queryTaskbarInfo: function (args) {
                if ((args.data.isCritical || args.data.slack === '0 day') && !args.data.hasChildRecords) {
                    args.taskbarBgColor = 'rgb(242, 210, 189)';
                    args.progressBarBgColor = 'rgb(201, 169, 166)';
                }
            }
        };
    },
    provide: {
        gantt: [CriticalPath, Edit, Toolbar]
    }
};
</script>