Skip to content

Commit 8bff9aa

Browse files
vinoth-Kumar-Svinoth-Kumar-S
authored
Adding Vue Gantt Drag and Drop Sample
Adding Vue Gantt Drag and Drop Sample
1 parent c112cf9 commit 8bff9aa

File tree

12 files changed

+356
-2
lines changed

12 files changed

+356
-2
lines changed

‎README.md‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,26 @@
1-
# drag-and-drop-items-from-external-sources-to-the-vue-gantt-chart
2-
A quick start project that allows you to drag and drop an item from an external TreeView component to the Vue Gantt Chart row. In this video, the dragged item is updated as a resource to the appropriate Gantt chart task using the nodeDragStop event of the TreeView component
1+
# Drag and Drop Items from External Sources to the Vue Gantt Chart
2+
3+
A quick start project that allows you to drag and drop an item from an external TreeView component to the Vue Gantt Chart row. In this video, the dragged item is updated as a resource to the appropriate Gantt Chart task using the nodeDragStop event of the TreeView component.
4+
5+
Refer to the drag and drop documentation for the Syncfusion Vue Gantt Chart component:
6+
https://helpej2.syncfusion.com/vue/documentation/gantt/how-to/drag-and-drop-from-another
7+
8+
Refer to the documentation for the feature modules in the Syncfusion Vue Gantt Chart component:
9+
https://ej2.syncfusion.com/vue/documentation/gantt/module
10+
11+
Refer to the Syncfusion Vue Gantt Chart Getting Started video:
12+
https://www.youtube.com/watch?v=S1GbWmVcre0
13+
14+
Refer to the Syncfusion Vue Gantt Chart Resource Allocation and Task Breakdown video:
15+
https://www.youtube.com/watch?v=JkvpRwaabQM
16+
17+
Refer to the Syncfusion Vue Gantt Chart editing video:
18+
https://www.youtube.com/watch?v=AmwIxCtejPo
19+
20+
## Project prerequisites
21+
22+
Make sure that you have the latest versions of Vue, Node, Vue Class Component, and Visual Studio Code in your machine before starting to work on this project.
23+
24+
### How to run this application?
25+
26+
To run this application, you need to clone the `drag-and-drop-items-from-external-sources-to-the-vue-gantt-chart` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `npm run serve` command.

‎babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎jsconfig.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "esnext",
5+
"baseUrl": "./",
6+
"moduleResolution": "node",
7+
"paths": {
8+
"@/*": [
9+
"src/*"
10+
]
11+
},
12+
"lib": [
13+
"esnext",
14+
"dom",
15+
"dom.iterable",
16+
"scripthost"
17+
]
18+
}
19+
}

‎package.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "myvueproject",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"@syncfusion/ej2-vue-gantt": "^22.1.36",
12+
"@syncfusion/ej2-vue-navigations": "^22.1.36",
13+
"core-js": "^3.8.3",
14+
"vue": "^3.2.13"
15+
},
16+
"devDependencies": {
17+
"@babel/core": "^7.12.16",
18+
"@babel/eslint-parser": "^7.12.16",
19+
"@vue/cli-plugin-babel": "~5.0.0",
20+
"@vue/cli-plugin-eslint": "~5.0.0",
21+
"@vue/cli-service": "~5.0.0",
22+
"eslint": "^7.32.0",
23+
"eslint-plugin-vue": "^8.0.3"
24+
},
25+
"eslintConfig": {
26+
"root": true,
27+
"env": {
28+
"node": true
29+
},
30+
"extends": [
31+
"plugin:vue/vue3-essential",
32+
"eslint:recommended"
33+
],
34+
"parserOptions": {
35+
"parser": "@babel/eslint-parser"
36+
},
37+
"rules": {}
38+
},
39+
"browserslist": [
40+
"> 1%",
41+
"last 2 versions",
42+
"not dead",
43+
"not ie 11"
44+
]
45+
}

‎public/favicon.ico‎

4.19 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎src/App.vue‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<div style="width: 75%; float: left;">
3+
<ejs-gantt ref="gantt" :dataSource="data"
4+
:taskFields="taskFields"
5+
:treeColumnIndex="1"
6+
:editSettings="editOptions"
7+
:resources="resources"
8+
:resourceFields="resourceFields"
9+
:labelSettings="labelOptions"
10+
:height="450">
11+
<e-columns>
12+
<e-column field="TaskID" headerText="Task ID" width="120" textAlign="Right"></e-column>
13+
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="200"></e-column>
14+
<e-column field="resources" width="200"></e-column>
15+
<e-column field="StartDate" headerText="Start Date" textAlign="Right" format="dd/MM/yyyy" width="120"></e-column>
16+
<e-column field="Duration" headerText="Duration" textAlign="Right" width="120"></e-column>
17+
</e-columns>
18+
</ejs-gantt>
19+
</div>
20+
<ejs-treeview :fields="treeViewData" :allowDragAndDrop="true" :nodeDragStop="onDragStop"></ejs-treeview>
21+
</template>
22+
23+
<script>
24+
import {GanttComponent, ColumnsDirective, ColumnDirective, Edit, Selection} from '@syncfusion/ej2-vue-gantt'
25+
import {TreeViewComponent} from '@syncfusion/ej2-vue-navigations'
26+
import {closest} from '@syncfusion/ej2-base'
27+
import {resourceData, editingResources} from './data.js'
28+
export default{
29+
name: 'App',
30+
components: {
31+
'ejs-gantt': GanttComponent,
32+
'e-columns': ColumnsDirective,
33+
'e-column': ColumnDirective,
34+
'ejs-treeview': TreeViewComponent
35+
},
36+
provide:{
37+
gantt: [Edit, Selection]
38+
},
39+
methods:{
40+
onDragStop(args){
41+
args.cancel = true
42+
var ganttObj = this.$refs.gantt.ej2Instances;
43+
var chartRowEle = closest(args.target, '.e-chart-row');
44+
var gridRowEle = closest(args.target, '.e-row');
45+
let selectedData;
46+
let resources = [];
47+
let record;
48+
if(chartRowEle || gridRowEle){
49+
record = args.draggedNodeData;
50+
let index = chartRowEle ? parseInt(chartRowEle.ariaRowIndex) : ganttObj.treeGrid.getRows().indexOf(gridRowEle);
51+
ganttObj.selectRow(index);
52+
selectedData = ganttObj.flatData[ganttObj.selectedRowIndex].taskData;
53+
if(selectedData.resources){
54+
for(let i=0; i<selectedData.resources.length; i++){
55+
resources.push(selectedData.resources[i].resourceId);
56+
}
57+
}
58+
resources.push(parseInt(record.id));
59+
ganttObj.updateRecordByID({TaskID: selectedData.TaskID, resources: resources});
60+
}
61+
}
62+
},
63+
data(){
64+
return{
65+
data: resourceData,
66+
editOptions:{
67+
allowEditing: true,
68+
},
69+
treeViewData: { dataSource: editingResources, id: 'resourceId', text: 'resourceName'},
70+
labelOptions:{
71+
rightLabel: 'resources',
72+
},
73+
resources:editingResources,
74+
resourceFields:{
75+
id: 'resourceId',
76+
name: 'resourceName'
77+
},
78+
taskFields:{
79+
id: 'TaskID',
80+
name: 'TaskName',
81+
resourceInfo:'resources',
82+
startDate: 'StartDate',
83+
endDate: 'EndDate',
84+
duration: 'Duration',
85+
progress: 'Progress',
86+
dependency: 'Predecessor',
87+
child: 'subtasks'
88+
},
89+
90+
}
91+
}
92+
}
93+
94+
</script>
95+
96+
<style>
97+
@import url("https://cdn.syncfusion.com/ej2/material.css");
98+
</style>
99+

‎src/assets/logo.png‎

6.69 KB
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="hello">
3+
<h1>{{ msg }}</h1>
4+
<p>
5+
For a guide and recipes on how to configure / customize this project,<br>
6+
check out the
7+
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8+
</p>
9+
<h3>Installed CLI Plugins</h3>
10+
<ul>
11+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13+
</ul>
14+
<h3>Essential Links</h3>
15+
<ul>
16+
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17+
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18+
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19+
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20+
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21+
</ul>
22+
<h3>Ecosystem</h3>
23+
<ul>
24+
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25+
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26+
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27+
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28+
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29+
</ul>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
name: 'HelloWorld',
36+
props: {
37+
msg: String
38+
}
39+
}
40+
</script>
41+
42+
<!-- Add "scoped" attribute to limit CSS to this component only -->
43+
<style scoped>
44+
h3 {
45+
margin: 40px 0 0;
46+
}
47+
ul {
48+
list-style-type: none;
49+
padding: 0;
50+
}
51+
li {
52+
display: inline-block;
53+
margin: 0 10px;
54+
}
55+
a {
56+
color: #42b983;
57+
}
58+
</style>

‎src/data.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
Object.defineProperty(exports, "__esModule", { value: true });
2+
export let resourceData = [
3+
{
4+
TaskID: 1,
5+
TaskName: 'Project initiation',
6+
StartDate: new Date('03/29/2019'),
7+
EndDate: new Date('04/21/2019'),
8+
subtasks: [
9+
{
10+
TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2019'), Duration: 3,
11+
Progress: 30, work: 10, resources: [{ resourceId: 1, resourceUnit: 50 }]
12+
},
13+
{
14+
TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('03/29/2019'), Duration: 4,
15+
resources: [{ resourceId: 2, resourceUnit: 70 }], Progress: 30, work: 20
16+
},
17+
{
18+
TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('03/29/2019'), Duration: 4,
19+
resources: [{ resourceId: 1, resourceUnit: 75 }], Predecessor: 2, Progress: 30, work: 10,
20+
},
21+
]
22+
},
23+
{
24+
TaskID: 5,
25+
TaskName: 'Project estimation', StartDate: new Date('03/29/2019'), EndDate: new Date('04/21/2019'),
26+
subtasks: [
27+
{
28+
TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2019'),
29+
Duration: 3, Progress: 30, resources: [{ resourceId: 2, resourceUnit: 70 }], Predecessor: '3FS+2', work: 30
30+
},
31+
{
32+
TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/08/2019'), Duration: 12,
33+
resources: [{ resourceId: 6, resourceUnit: 40 }], Progress: 30, work: 40
34+
},
35+
{
36+
TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/03/2019'),
37+
Duration: 10, resources: [{ resourceId: 5, resourceUnit: 75 }], Progress: 30, work: 60,
38+
},
39+
{
40+
TaskID: 9, TaskName: 'Excavate for foundations', StartDate: new Date('04/01/2019'),
41+
Duration: 4, Progress: 30, resources: [4]
42+
},
43+
{
44+
TaskID: 10, TaskName: 'Install plumbing grounds', StartDate: new Date('04/08/2019'), Duration: 4,
45+
Progress: 30, Predecessor: '9SS', resources: [3]
46+
},
47+
{
48+
TaskID: 11, TaskName: 'Dig footer', StartDate: new Date('04/08/2019'),
49+
Duration: 3, resources: [2]
50+
},
51+
{
52+
TaskID: 12, TaskName: 'Electrical utilities', StartDate: new Date('04/03/2019'),
53+
Duration: 4, Progress: 30, resources: [3]
54+
}
55+
]
56+
},
57+
{
58+
TaskID: 13, TaskName: 'Sign contract', StartDate: new Date('04/04/2019'), Duration: 2,
59+
Progress: 30,
60+
}
61+
];
62+
63+
export let editingResources = [
64+
{ resourceId: 1, resourceName: 'Martin Tamer' },
65+
{ resourceId: 2, resourceName: 'Rose Fuller' },
66+
{ resourceId: 3, resourceName: 'Margaret Buchanan' },
67+
{ resourceId: 4, resourceName: 'Fuller King' },
68+
{ resourceId: 5, resourceName: 'Davolio Fuller' },
69+
{ resourceId: 6, resourceName: 'Van Jack' },
70+
{ resourceId: 7, resourceName: 'Fuller Buchanan' },
71+
{ resourceId: 8, resourceName: 'Jack Davolio' },
72+
{ resourceId: 9, resourceName: 'Tamer Vinet' },
73+
{ resourceId: 10, resourceName: 'Vinet Fuller' },
74+
{ resourceId: 11, resourceName: 'Bergs Anton' },
75+
{ resourceId: 12, resourceName: 'Construction Supervisor' }
76+
];
77+
78+

0 commit comments

Comments
 (0)