Skip to content

Commit 1489809

Browse files
abooarulrajabooarulraj
authored
Committed the example project.
0 parents  commit 1489809

19 files changed

+445
-0
lines changed

‎README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# How to perform selection in React TreeGrid
2+
3+
A quick-start project that helps you to perform selection in a TreeGrid with different types and modes. This project also contains codes to perform checkbox selection, toggle selection, and a few of its APIs.
4+
5+
Documentation: https://ej2.syncfusion.com/react/documentation/treegrid/selection/
6+
7+
Online examples: https://ej2.syncfusion.com/react/demos/#/material/treegrid/selection
8+
9+
## Project prerequisites
10+
11+
Make sure that you have the lastest versions of NodeJS and visual studio code in your machine before starting to work on this project.
12+
13+
## How to run this application?
14+
15+
To run this application, you need to clone the `how-to-perform-selection-in-react-treegrid` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using `npm install` command and run your project using the `npm start` command.

‎package.json

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "treegrid-component",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@syncfusion/ej2-react-buttons": "^18.3.47",
7+
"@syncfusion/ej2-react-calendars": "^18.3.52",
8+
"@syncfusion/ej2-react-dropdowns": "^18.3.52",
9+
"@syncfusion/ej2-react-inputs": "^18.3.52",
10+
"@syncfusion/ej2-react-treegrid": "^18.3.47",
11+
"@testing-library/jest-dom": "^5.11.5",
12+
"@testing-library/react": "^11.1.1",
13+
"@testing-library/user-event": "^12.2.0",
14+
"@types/jest": "^26.0.15",
15+
"@types/node": "^12.19.3",
16+
"@types/react": "^16.9.56",
17+
"@types/react-dom": "^16.9.9",
18+
"react": "^17.0.1",
19+
"react-dom": "^17.0.1",
20+
"react-scripts": "4.0.0",
21+
"typescript": "^4.0.5",
22+
"web-vitals": "^0.2.4"
23+
},
24+
"scripts": {
25+
"start": "react-scripts start",
26+
"build": "react-scripts build",
27+
"test": "react-scripts test",
28+
"eject": "react-scripts eject"
29+
},
30+
"eslintConfig": {
31+
"extends": [
32+
"react-app",
33+
"react-app/jest"
34+
]
35+
},
36+
"browserslist": {
37+
"production": [
38+
">0.2%",
39+
"not dead",
40+
"not op_mini all"
41+
],
42+
"development": [
43+
"last 1 chrome version",
44+
"last 1 firefox version",
45+
"last 1 safari version"
46+
]
47+
}
48+
}

‎public/favicon.ico

3.78 KB
Binary file not shown.

‎public/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16+
-->
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>React App</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
</html>

‎public/logo192.png

5.22 KB
Loading

‎public/logo512.png

9.44 KB
Loading

‎public/manifest.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎public/robots.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎src/App.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import url("https://cdn.syncfusion.com/ej2/material.css");
2+
3+
button{
4+
margin: 10px;
5+
}

‎src/App.test.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import App from './App';
4+
5+
test('renders learn react link', () => {
6+
render(<App />);
7+
const linkElement = screen.getByText(/learn react/i);
8+
expect(linkElement).toBeInTheDocument();
9+
});

‎src/App.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import { TreeGridComponent, ColumnsDirective, ColumnDirective,
3+
Inject, Page, TreeGrid } from '@syncfusion/ej2-react-treegrid';
4+
import { summaryData } from './datasource';
5+
import './App.css';
6+
7+
function App() {
8+
let treegrid: TreeGrid | null;
9+
function btnClick(){
10+
if(treegrid){
11+
treegrid.selectRows([0, 2, 3]);
12+
// Uncomment below code to clear selection
13+
//treegrid.clearSelection();
14+
}
15+
}
16+
return (
17+
<div>
18+
<button className="e-btn" onClick={btnClick}>API</button>
19+
<TreeGridComponent ref={tg => treegrid = tg}
20+
dataSource={summaryData}
21+
childMapping="subtasks"
22+
treeColumnIndex={1}
23+
allowPaging={true}
24+
selectedRowIndex={3}
25+
selectionSettings={{ type:"Multiple",
26+
// enableToggle: false,
27+
// mode:"Both",
28+
// checkboxMode:"ResetOnRowClick",
29+
// persistSelection: true
30+
}}>
31+
<Inject services={[Page]} />
32+
<ColumnsDirective>
33+
<ColumnDirective type="checkbox" width="90"></ColumnDirective>
34+
<ColumnDirective field="taskID" headerText="Task ID"
35+
width='90' textAlign="Right" isPrimaryKey={true}>
36+
</ColumnDirective>
37+
<ColumnDirective field="taskName" headerText="Task Name">
38+
</ColumnDirective>
39+
<ColumnDirective field="startDate" headerText="Start Date"
40+
format='yMd'>
41+
</ColumnDirective>
42+
<ColumnDirective field="duration" headerText="Duration">
43+
</ColumnDirective>
44+
<ColumnDirective field="priority" headerText="Priority">
45+
</ColumnDirective>
46+
<ColumnDirective field="approved" headerText="Approved">
47+
</ColumnDirective>
48+
</ColumnsDirective>
49+
</TreeGridComponent>
50+
</div>
51+
);
52+
}
53+
54+
export default App;

‎src/datasource.js

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
Object.defineProperty(exports, "__esModule", { value: true });
2+
exports.summaryData = [
3+
{
4+
taskID: 1,
5+
taskName: 'Planning',
6+
startDate: new Date('02/03/2017'),
7+
endDate: new Date('02/07/2017'),
8+
progress: 100,
9+
duration: 5,
10+
priority: 'Normal',
11+
approved: false,
12+
subtasks: [
13+
{ taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
14+
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
15+
{ taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
16+
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
17+
{ taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
18+
endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
19+
{ taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
20+
endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
21+
]
22+
},
23+
{
24+
taskID: 6,
25+
taskName: 'Design',
26+
startDate: new Date('02/10/2017'),
27+
endDate: new Date('02/14/2017'),
28+
duration: 3,
29+
progress: 86,
30+
priority: 'High',
31+
approved: false,
32+
subtasks: [
33+
{ taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'),
34+
endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
35+
{ taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'),
36+
endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
37+
{ taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'),
38+
endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true },
39+
{ taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'),
40+
endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true },
41+
{ taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'),
42+
endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
43+
]
44+
},
45+
{
46+
taskID: 12,
47+
taskName: 'Implementation Phase',
48+
startDate: new Date('02/17/2017'),
49+
endDate: new Date('02/27/2017'),
50+
priority: 'Normal',
51+
approved: false,
52+
duration: 11,
53+
progress: 66,
54+
subtasks: [
55+
{
56+
taskID: 13,
57+
taskName: 'Phase 1',
58+
startDate: new Date('02/17/2017'),
59+
endDate: new Date('02/27/2017'),
60+
priority: 'High',
61+
approved: false,
62+
progress: 50,
63+
duration: 11,
64+
subtasks: [{
65+
taskID: 14,
66+
taskName: 'Implementation Module 1',
67+
startDate: new Date('02/17/2017'),
68+
endDate: new Date('02/27/2017'),
69+
priority: 'Normal',
70+
duration: 11,
71+
progress: 10,
72+
approved: false,
73+
subtasks: [
74+
{ taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
75+
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
76+
{ taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
77+
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
78+
{ taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'),
79+
endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
80+
{ taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
81+
endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
82+
{ taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
83+
endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
84+
{ taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'),
85+
endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true }
86+
]
87+
}]
88+
},
89+
{
90+
taskID: 21,
91+
taskName: 'Phase 2',
92+
startDate: new Date('02/17/2017'),
93+
endDate: new Date('02/28/2017'),
94+
priority: 'High',
95+
approved: false,
96+
duration: 12,
97+
progress: 60,
98+
subtasks: [{
99+
taskID: 22,
100+
taskName: 'Implementation Module 2',
101+
startDate: new Date('02/17/2017'),
102+
endDate: new Date('02/28/2017'),
103+
priority: 'Critical',
104+
approved: false,
105+
duration: 12,
106+
progress: 90,
107+
subtasks: [
108+
{ taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
109+
endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
110+
{ taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
111+
endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true },
112+
{ taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'),
113+
endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
114+
{ taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'),
115+
endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
116+
{ taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'),
117+
endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
118+
{ taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'),
119+
endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false }
120+
]
121+
}]
122+
},
123+
{
124+
taskID: 29,
125+
taskName: 'Phase 3',
126+
startDate: new Date('02/17/2017'),
127+
endDate: new Date('02/27/2017'),
128+
priority: 'Normal',
129+
approved: false,
130+
duration: 11,
131+
progress: 30,
132+
subtasks: [{
133+
taskID: 30,
134+
taskName: 'Implementation Module 3',
135+
startDate: new Date('02/17/2017'),
136+
endDate: new Date('02/27/2017'),
137+
priority: 'High',
138+
approved: false,
139+
duration: 11,
140+
progress: 60,
141+
subtasks: [
142+
{ taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'),
143+
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
144+
{ taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'),
145+
endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false },
146+
{ taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'),
147+
endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
148+
{ taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'),
149+
endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
150+
{ taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'),
151+
endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
152+
{ taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'),
153+
endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false },
154+
]
155+
}]
156+
}
157+
]
158+
}
159+
]

‎src/index.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
code {
11+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12+
monospace;
13+
}

0 commit comments

Comments
 (0)