Skip to content

Commit 844f71b

Browse files
UmaMaheswariChandraboseUmaMaheswariChandrabose
authored
Merge pull request #1 from vinoth-Kumar-S/master
Vue Tree Grid editing sample
2 parents fca58d9 + d9ba4fc commit 844f71b

File tree

13 files changed

+412
-1
lines changed

13 files changed

+412
-1
lines changed

‎README.md‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,20 @@
1-
# different-editing-modes-and-cell-edit-types-in-vue-tree-grid
1+
# Different Editing Modes and Cell Edit Types in Vue Tree Grid
2+
23
A quick-start project that shows how to enable a toolbar with editing options in Vue Tree Grid, and the different cell edit types and modes. This project also contains simple code to render command columns in a Tree Grid.
4+
5+
Refer to the following documentation of editing in the Syncfusion Vue Tree Grid component:
6+
https://ej2.syncfusion.com/vue/documentation/treegrid/editing/edit/
7+
8+
Check out this online editing example of the Syncfusion Vue Tree Grid component:
9+
https://ej2.syncfusion.com/vue/demos/#/material/tree-grid/inline-editing.html
10+
11+
Refer to the following Syncfusion Vue Tree Grid getting started video:
12+
https://www.youtube.com/watch?v=FEMyOHKjjao
13+
14+
## Project prerequisites
15+
16+
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.
17+
18+
### How to run this application?
19+
20+
To run this application, you need to clone the `different-editing-modes-and-cell-edit-types-in-vue-tree-grid` 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: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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-grids": "^20.2.45",
12+
"@syncfusion/ej2-vue-treegrid": "^20.2.45",
13+
"core-js": "^3.8.3",
14+
"vue": "^3.2.13",
15+
"vue-class-component": "^8.0.0-rc.1"
16+
},
17+
"devDependencies": {
18+
"@babel/core": "^7.12.16",
19+
"@babel/eslint-parser": "^7.12.16",
20+
"@vue/cli-plugin-babel": "~5.0.0",
21+
"@vue/cli-plugin-eslint": "~5.0.0",
22+
"@vue/cli-service": "~5.0.0",
23+
"eslint": "^7.32.0",
24+
"eslint-plugin-vue": "^8.0.3"
25+
},
26+
"eslintConfig": {
27+
"root": true,
28+
"env": {
29+
"node": true
30+
},
31+
"extends": [
32+
"plugin:vue/vue3-essential",
33+
"eslint:recommended"
34+
],
35+
"parserOptions": {
36+
"parser": "@babel/eslint-parser"
37+
},
38+
"rules": {}
39+
},
40+
"browserslist": [
41+
"> 1%",
42+
"last 2 versions",
43+
"not dead",
44+
"not ie 11"
45+
]
46+
}

‎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: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<ejs-treegrid :dataSource="data"
3+
childMapping="subtasks"
4+
:treeColumnIndex="1"
5+
:editSettings="editOptions"
6+
:toolbar="toolbarSettings"
7+
:allowPaging="true">
8+
<e-columns>
9+
<e-column field="taskID" :isPrimaryKey="true" headerText="Task ID" width="70" textAlign="Right"></e-column>
10+
<e-column field='taskName' headerText='Task Name' width='200'></e-column>
11+
<e-column field='startDate' headerText='Start Date' width='110'
12+
format="yMd" textAlign='Right' editType="datepickeredit"
13+
:edit="dateTimeParams"></e-column>
14+
<e-column field='duration' headerText='Duration' width='80' textAlign='Right' editType="numericedit"></e-column>
15+
<e-column field='priority' headerText='Priority' width='90' editType="dropdownedit"></e-column>
16+
<e-column field='approved' headerText='Approved' width='90' editType="booleanedit" displayAsCheckBox="true"></e-column>
17+
<e-column headerText="Manage Records" :commands="commands" width="100"></e-column>
18+
</e-columns>
19+
</ejs-treegrid>
20+
</template>
21+
22+
<script>
23+
import {TreeGridComponent, ColumnsDirective, ColumnDirective, Page, Edit, Toolbar, CommandColumn} from '@syncfusion/ej2-vue-treegrid';
24+
import {sampleData} from './data.js';
25+
export default {
26+
name: 'App',
27+
components: {
28+
'ejs-treegrid': TreeGridComponent,
29+
'e-columns': ColumnsDirective,
30+
'e-column': ColumnDirective
31+
},
32+
data:()=>{
33+
return{
34+
data: sampleData,
35+
editOptions: {allowAdding:true, allowEditing:true, allowDeleting:true, mode:"Row"},
36+
toolbarSettings: ["Add", "Delete", "Update", "Cancel", "Edit"],
37+
dateTimeParams: {params:{format:"d-MMM-y hh:mm a"}},
38+
commands: [
39+
{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },
40+
{ type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },
41+
{ type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },
42+
{ type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }
43+
]
44+
}
45+
},
46+
provide:{
47+
treegrid: [Page, Edit, Toolbar, CommandColumn]
48+
}
49+
}
50+
</script>
51+
52+
<style>
53+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
54+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
55+
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
56+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
57+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
58+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
59+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
60+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
61+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
62+
@import "../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";
63+
64+
.btn{
65+
margin: 1%;
66+
}
67+
</style>

‎src/__VLS_template.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { TreeGridComponent } from '@syncfusion/ej2-vue-treegrid';
2+
3+
export default (await import('vue')).defineComponent({
4+
name: 'App',
5+
components: {
6+
'ejs-treegrid': TreeGridComponent
7+
}
8+
});
9+
const __VLS_template = () => ({});

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