New row position in Vue Gantt component

11 Jun 202419 minutes to read

In Gantt, a new row can be added in one of the following positions: Top, Bottom, Above, Below and Child. This position can be specified through the newRowPostion property. We can make use of the toolbarClick event to create a context menu that specifies the position in which the new row is to be added when adding a record through toolbar click.

The following code snippets demonstrate how to achieve this.

<template>
     <div>
     <ejs-contextmenu id='cmenu' :items='menuItems' :select="select"></ejs-contextmenu>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :toolbarClick="toolbarClick" :editSettings= "editSettings"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import {
  GanttComponent as EjsGantt,
  Edit,
  Toolbar,
  Selection,
} from "@syncfusion/ej2-vue-gantt";
import { ContextMenuComponent as EjsContextmenu } from "@syncfusion/ej2-vue-navigations";
const gantt = ref(null);
const cmenu = ref(null);
const menuItems = [
  {
    text: "Bottom",
  },
  {
    text: "Above",
  },
  {
    text: "Below",
  },
  {
    text: "Child",
  },
  {
    text: "Top",
  },
];
const data = [
  {
    TaskID: 1,
    TaskName: "Project Initiation",
    StartDate: new Date("04/02/2019"),
    EndDate: new Date("04/21/2019"),
    subtasks: [
      {
        TaskID: 2,
        TaskName: "Identify Site location",
        StartDate: new Date("04/02/2019"),
        Duration: 4,
        Progress: 50,
      },
      {
        TaskID: 3,
        TaskName: "Perform Soil test",
        StartDate: new Date("04/02/2019"),
        Duration: 4,
        Progress: 50,
      },
      {
        TaskID: 4,
        TaskName: "Soil test approval",
        StartDate: new Date("04/02/2019"),
        Duration: 4,
        Progress: 50,
      },
    ],
  },
  {
    TaskID: 5,
    TaskName: "Project Estimation",
    StartDate: new Date("04/02/2019"),
    EndDate: new Date("04/21/2019"),
    subtasks: [
      {
        TaskID: 6,
        TaskName: "Develop floor plan for estimation",
        StartDate: new Date("04/04/2019"),
        Duration: 3,
        Progress: 50,
      },
      {
        TaskID: 7,
        TaskName: "List materials",
        StartDate: new Date("04/04/2019"),
        Duration: 3,
        Progress: 50,
      },
      {
        TaskID: 8,
        TaskName: "Estimation approval",
        StartDate: new Date("04/04/2019"),
        Duration: 3,
        Progress: 50,
      },
    ],
  },
];
const height = "450px";
const taskFields = {
  id: "TaskID",
  name: "TaskName",
  startDate: "StartDate",
  duration: "Duration",
  progress: "Progress",
  child: "subtasks",
};
const editSettings = {
  allowAdding: true,
};
const toolbar = [
  {
    text: "Add",
    tooltipText: "Add",
    id: "Add",
  }
];
const toolbarClick = (args) => {
  if (args.item.id === "Add") {
    cmenu.value.ej2Instances.open(40, 20);
  }
};
const select = function (args) {
  var ganttObj = gantt.value.ej2Instances;
  if (args.item.text === "Bottom") {
    ganttObj.editSettings.newRowPosition = "Bottom";
    ganttObj.openAddDialog();
  } else if (args.item.text === "Above") {
    if (ganttObj.selectedRowIndex === -1) {
      alert("Please select any row");
    } else {
      ganttObj.editSettings.newRowPosition = "Above";
      ganttObj.openAddDialog();
    }
  } else if (args.item.text === "Below") {
    if (ganttObj.selectedRowIndex === -1) {
      alert("Please select any row");
    } else {
      ganttObj.editSettings.newRowPosition = "Below";
      ganttObj.openAddDialog();
    }
  } else if (args.item.text === "Child") {
    if (ganttObj.selectedRowIndex === -1) {
      alert("Please select any row");
    } else {
      ganttObj.editSettings.newRowPosition = "Child";
      ganttObj.openAddDialog();
    }
  } else if (args.item.text === "Top") {
    ganttObj.editSettings.newRowPosition = "Top";
    ganttObj.openAddDialog();
  }
};
provide('gantt',  [Edit, Toolbar, Selection]);
</script>
<template>
     <div>
     <ejs-contextmenu id='cmenu' :items='menuItems' :select="select"></ejs-contextmenu>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :toolbarClick="toolbarClick" :editSettings= "editSettings"></ejs-gantt>
    </div>
</template>
<script>

import {
  GanttComponent,
  Edit,
  Toolbar,
  Selection,
} from "@syncfusion/ej2-vue-gantt";
import { ContextMenuComponent } from "@syncfusion/ej2-vue-navigations";
export default {
name: "App",
components: {
"ejs-contextmenu":ContextMenuComponent,
"ejs-gantt":GanttComponent
},

  data: function () {
    return {
      menuItems: [
        {
          text: "Bottom",
        },
        {
          text: "Above",
        },
        {
          text: "Below",
        },
        {
          text: "Child",
        },
        {
          text: "Top",
        },
      ],
      data: [
        {
          TaskID: 1,
          TaskName: "Project Initiation",
          StartDate: new Date("04/02/2019"),
          EndDate: new Date("04/21/2019"),
          subtasks: [
            {
              TaskID: 2,
              TaskName: "Identify Site location",
              StartDate: new Date("04/02/2019"),
              Duration: 4,
              Progress: 50,
            },
            {
              TaskID: 3,
              TaskName: "Perform Soil test",
              StartDate: new Date("04/02/2019"),
              Duration: 4,
              Progress: 50,
            },
            {
              TaskID: 4,
              TaskName: "Soil test approval",
              StartDate: new Date("04/02/2019"),
              Duration: 4,
              Progress: 50,
            },
          ],
        },
        {
          TaskID: 5,
          TaskName: "Project Estimation",
          StartDate: new Date("04/02/2019"),
          EndDate: new Date("04/21/2019"),
          subtasks: [
            {
              TaskID: 6,
              TaskName: "Develop floor plan for estimation",
              StartDate: new Date("04/04/2019"),
              Duration: 3,
              Progress: 50,
            },
            {
              TaskID: 7,
              TaskName: "List materials",
              StartDate: new Date("04/04/2019"),
              Duration: 3,
              Progress: 50,
            },
            {
              TaskID: 8,
              TaskName: "Estimation approval",
              StartDate: new Date("04/04/2019"),
              Duration: 3,
              Progress: 50,
            },
          ],
        },
      ],
      height: "450px",
      taskFields: {
        id: "TaskID",
        name: "TaskName",
        startDate: "StartDate",
        duration: "Duration",
        progress: "Progress",
        child: "subtasks",
      },
      editSettings: {
        allowAdding: true,
      },
      toolbar: [
        {
          text: "Add",
          tooltipText: "Add",
          id: "Add",
        }
      ],
      toolbarClick: (args) => {
        if (args.item.id === "Add") {
          document.getElementById("cmenu").ej2_instances[0].open(40, 20);
        }
      },
    };
  },
  methods: {
    select: function (args) {
      var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
      if (args.item.text === "Bottom") {
        ganttObj.editSettings.newRowPosition = "Bottom";
        ganttObj.openAddDialog();
      } else if (args.item.text === "Above") {
        if (ganttObj.selectedRowIndex === -1) {
          alert("Please select any row");
        } else {
          ganttObj.editSettings.newRowPosition = "Above";
          ganttObj.openAddDialog();
        }
      } else if (args.item.text === "Below") {
        if (ganttObj.selectedRowIndex === -1) {
          alert("Please select any row");
        } else {
          ganttObj.editSettings.newRowPosition = "Below";
          ganttObj.openAddDialog();
        }
      } else if (args.item.text === "Child") {
        if (ganttObj.selectedRowIndex === -1) {
          alert("Please select any row");
        } else {
          ganttObj.editSettings.newRowPosition = "Child";
          ganttObj.openAddDialog();
        }
      } else if (args.item.text === "Top") {
        ganttObj.editSettings.newRowPosition = "Top";
        ganttObj.openAddDialog();
      }
    },
  },
  provide: {
    gantt: [Edit, Toolbar, Selection],
  },
};
</script>