Skip to content

Commit 6866c78

Browse files
vinoth-Kumar-Svinoth-Kumar-S
authored
Adding Vue Gantt Column template sample
Adding Vue Gantt Column template sample
1 parent c281cd0 commit 6866c78

File tree

12 files changed

+472
-1
lines changed

12 files changed

+472
-1
lines changed

‎README.md‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,30 @@
1-
# how-to-customize-columns-using-templates-in-vue-gantt-chart
1+
# How to Schedule and Track Tasks in the Vue Gantt Chart Component
2+
23
A quick-start project that helps you to customize the column headers and data in the Vue Gantt Chart component using templates. This project contains code snippets to add the custom toolbar buttons Quick Filter and Clear Filter.
4+
5+
Refer to the following documentation on the column template in the Syncfusion Vue Gantt component:
6+
https://ej2.syncfusion.com/vue/documentation/gantt/columns/column-template
7+
8+
Refer to the following documentation on the header template in the Syncfusion Vue Tree Grid component:
9+
https://ej2.syncfusion.com/vue/documentation/gantt/columns/columns#custom-column-header
10+
11+
Check out this online column template example for the Syncfusion Vue Gantt component:
12+
https://ej2.syncfusion.com/vue/demos/#/material/gantt/column-template.html
13+
14+
Check out this online header template example for the Syncfusion Vue Gantt component:
15+
https://ej2.syncfusion.com/vue/demos/#/material/gantt/header-template.html
16+
17+
Check the following documentation to learn more about template rendering in Syncfusion Vue components:
18+
https://ej2.syncfusion.com/vue/documentation/common/template/
19+
20+
Refer to the following Syncfusion Vue Gantt Chart Getting Started video:
21+
https://www.youtube.com/watch?v=S1GbWmVcre0
22+
23+
24+
## Project prerequisites
25+
26+
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.
27+
28+
### How to run this application?
29+
30+
To run this application, you need to clone the `how-to-customize-columns-using-templates-in-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: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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": "^21.1.38",
12+
"core-js": "^3.8.3",
13+
"vue": "^3.2.13"
14+
},
15+
"devDependencies": {
16+
"@babel/core": "^7.12.16",
17+
"@babel/eslint-parser": "^7.12.16",
18+
"@vue/cli-plugin-babel": "~5.0.0",
19+
"@vue/cli-plugin-eslint": "~5.0.0",
20+
"@vue/cli-service": "~5.0.0",
21+
"eslint": "^7.32.0",
22+
"eslint-plugin-vue": "^8.0.3"
23+
},
24+
"eslintConfig": {
25+
"root": true,
26+
"env": {
27+
"node": true
28+
},
29+
"extends": [
30+
"plugin:vue/vue3-essential",
31+
"eslint:recommended"
32+
],
33+
"parserOptions": {
34+
"parser": "@babel/eslint-parser"
35+
},
36+
"rules": {}
37+
},
38+
"browserslist": [
39+
"> 1%",
40+
"last 2 versions",
41+
"not dead",
42+
"not ie 11"
43+
]
44+
}

‎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: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<ejs-gantt ref="gantt"
3+
:dataSource="data"
4+
:taskFields="taskFields"
5+
:treeColumnIndex="1"
6+
:toolbar="toolbarOptions"
7+
:allowFiltering="true"
8+
:resources="resources"
9+
:resourceFields="resourceFields"
10+
v-on:toolbarClick="toolbarClick"
11+
:height="450"
12+
:rowHeight="60">
13+
<e-columns>
14+
<e-column field="TaskID" headerText="Task ID" width="120" textAlign="Right"></e-column>
15+
<e-column field="TaskName" textAlign="Left" width="200" :headerTemplate="'headerTemplate'"></e-column>
16+
<e-column field="resources" :template="'resourceTemplate'" :headerTemplate="'headerTemplate2'"></e-column>
17+
<e-column field="StartDate" headerText="Start Date" textAlign="Right" format="dd/MM/yyyy" width="120"></e-column>
18+
<e-column field="Duration" headerText="Duration" textAlign="Right" width="120"></e-column>
19+
</e-columns>
20+
<template v-slot:headerTemplate>
21+
<div>
22+
<img src="https://ej2.syncfusion.com/vue/demos/source/gantt/images/taskname.png" height="20" width="20"/> Task Name
23+
</div>
24+
</template>
25+
<template v-slot:headerTemplate2>
26+
<div>
27+
<img src="https://ej2.syncfusion.com/vue/demos/source/gantt/images/resources.png" height="20" width="20"/> Resources
28+
</div>
29+
</template>
30+
<template v-slot:resourceTemplate="{data}">
31+
<div v-if="data.ganttProperties.resourceNames">
32+
<img :src="'https://ej2.syncfusion.com/vue/demos/source/gantt/images/' + data.ganttProperties.resourceNames + '.png'"
33+
height="40" width="40"/>
34+
</div>
35+
</template>
36+
</ejs-gantt>
37+
</template>
38+
39+
<script>
40+
import {GanttComponent, ColumnsDirective, ColumnDirective, Toolbar, Filter} from '@syncfusion/ej2-vue-gantt'
41+
import {projectNewData, editingResources} from './data.js'
42+
export default {
43+
name: 'App',
44+
components: {
45+
'ejs-gantt': GanttComponent,
46+
'e-columns': ColumnsDirective,
47+
'e-column': ColumnDirective
48+
},
49+
provide:{
50+
gantt: [Toolbar, Filter]
51+
},
52+
methods:{
53+
toolbarClick(args){
54+
let ganttObj = this.$refs.gantt.ej2Instances;
55+
if(args.item.text === 'Quick Filter'){
56+
ganttObj.filterByColumn('TaskName', 'startswith', 'Research');
57+
} else{
58+
ganttObj.clearFiltering();
59+
}
60+
}
61+
},
62+
data(){
63+
return{
64+
data: projectNewData,
65+
resources:editingResources,
66+
toolbarOptions:[{text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'Quick Filter' },
67+
{ text: 'Clear Filter', tooltipText: 'Clear Filter', id: 'Clear Filter' }],
68+
resourceFields:{
69+
id:'resourceId',
70+
name:'resourceName'
71+
},
72+
taskFields:{
73+
id: 'TaskID',
74+
name: 'TaskName',
75+
startDate: 'StartDate',
76+
endDate: 'EndDate',
77+
duration: 'Duration',
78+
progress: 'Progress',
79+
dependency: 'Predecessor',
80+
child: 'subtasks',
81+
resourceInfo: 'resources'
82+
},
83+
}
84+
}
85+
}
86+
</script>
87+
88+
<style>
89+
@import url("https://cdn.syncfusion.com/ej2/material.css");
90+
</style>

‎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>

0 commit comments

Comments
 (0)