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>