Skip to content

Commit cba9df7

Browse files
author
pipeline
committed
feature(EJ2-4805): Merged the TreeView Typescript samples
1 parent e269960 commit cba9df7

33 files changed

+854
-2
lines changed

‎src/common/sampleList.ts‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/common/sampleOrder.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
"Grids": ["Grid"],
44
"Editors": ["Form Validator", "DropDownList", "ComboBox", "AutoComplete", "MultiSelect", "Calendar", "DatePicker", "DateRangePicker", "NumericTextBox", "Button", "TextBoxes", "TimePicker", "MaskedTextBox"],
55
"Layout": ["ListView", "Dialog", "Tooltip"],
6-
"Navigation": ["ContextMenu", "Accordion", "Toolbar", "Tab"]
6+
"Navigation": ["ContextMenu", "Accordion", "Toolbar", "Tab", "TreeView"]
77
}

‎src/treeview/checkbox-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { TreeView } from '@syncfusion/ej2-navigations';\n\n/**\n * TreeView checkbox sample\n */\n\n let countries: { [key: string]: Object }[] = [\n { id: 1, name: 'Australia', hasChild: true, expanded: true },\n { id: 2, pid: 1, name: 'New South Wales' },\n { id: 3, pid: 1, name: 'Victoria' },\n { id: 4, pid: 1, name: 'South Australia' },\n { id: 6, pid: 1, name: 'Western Australia' },\n { id: 7, name: 'Brazil', hasChild: true },\n { id: 8, pid: 7, name: 'Paraná' },\n { id: 9, pid: 7, name: 'Ceará' },\n { id: 10, pid: 7, name: 'Acre' },\n { id: 11, name: 'China', hasChild: true },\n { id: 12, pid: 11, name: 'Guangzhou' },\n { id: 13, pid: 11, name: 'Shanghai' },\n { id: 14, pid: 11, name: 'Beijing' },\n { id: 15, pid: 11, name: 'Shantou' },\n { id: 16, name: 'France', hasChild: true },\n { id: 17, pid: 16, name: 'Pays de la Loire' },\n { id: 18, pid: 16, name: 'Aquitaine' },\n { id: 19, pid: 16, name: 'Brittany' },\n { id: 20, pid: 16, name: 'Lorraine' },\n { id: 21, name: 'India', hasChild: true },\n { id: 22, pid: 21, name: 'Assam' },\n { id: 23, pid: 21, name: 'Bihar' },\n { id: 24, pid: 21, name: 'Tamil Nadu' },\n { id: 25, pid: 21, name: 'Punjab' }\n ];\n\n let treeObj: TreeView = new TreeView({\n fields: { dataSource: countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },\n showCheckBox: true,\n });\n treeObj.appendTo('#tree');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\">\n <div id=\"tree\"></div>\n </div>\n</div>\n<style>\n .control_wrapper {\n max-width: 500px;\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n</style>\n\n\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

‎src/treeview/checkbox.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div class="col-lg-12 control-section">
2+
<div class="control_wrapper">
3+
<div id="tree"></div>
4+
</div>
5+
</div>
6+
<style>
7+
.control_wrapper {
8+
max-width: 500px;
9+
margin: auto;
10+
border: 1px solid #dddddd;
11+
border-radius: 3px;
12+
}
13+
</style>
14+
15+
<div id="description">
16+
<p>The <code>TreeView</code> component can be render with checkbox on the left side of each tree node. This allows the user to check more than one nodes, and this can be enabled by <code>showCheckBox</code> property.</p>
17+
<p>In this demo, the TreeView was populated with checkbox enabled.</p>
18+
<p>For more information, you can refer the <a href="../documentation/treeview/checkboxes.html" target="_blank">Checkboxes</a> section from the documentation.</p>
19+
</div>

‎src/treeview/checkbox.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { TreeView } from '@syncfusion/ej2-navigations';
2+
3+
/**
4+
* TreeView checkbox sample
5+
*/
6+
this.default = () => {
7+
let countries: { [key: string]: Object }[] = [
8+
{ id: 1, name: 'Australia', hasChild: true, expanded: true },
9+
{ id: 2, pid: 1, name: 'New South Wales' },
10+
{ id: 3, pid: 1, name: 'Victoria' },
11+
{ id: 4, pid: 1, name: 'South Australia' },
12+
{ id: 6, pid: 1, name: 'Western Australia' },
13+
{ id: 7, name: 'Brazil', hasChild: true },
14+
{ id: 8, pid: 7, name: 'Paraná' },
15+
{ id: 9, pid: 7, name: 'Ceará' },
16+
{ id: 10, pid: 7, name: 'Acre' },
17+
{ id: 11, name: 'China', hasChild: true },
18+
{ id: 12, pid: 11, name: 'Guangzhou' },
19+
{ id: 13, pid: 11, name: 'Shanghai' },
20+
{ id: 14, pid: 11, name: 'Beijing' },
21+
{ id: 15, pid: 11, name: 'Shantou' },
22+
{ id: 16, name: 'France', hasChild: true },
23+
{ id: 17, pid: 16, name: 'Pays de la Loire' },
24+
{ id: 18, pid: 16, name: 'Aquitaine' },
25+
{ id: 19, pid: 16, name: 'Brittany' },
26+
{ id: 20, pid: 16, name: 'Lorraine' },
27+
{ id: 21, name: 'India', hasChild: true },
28+
{ id: 22, pid: 21, name: 'Assam' },
29+
{ id: 23, pid: 21, name: 'Bihar' },
30+
{ id: 24, pid: 21, name: 'Tamil Nadu' },
31+
{ id: 25, pid: 21, name: 'Punjab' }
32+
];
33+
34+
let treeObj: TreeView = new TreeView({
35+
fields: { dataSource: countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
36+
showCheckBox: true,
37+
});
38+
treeObj.appendTo('#tree');
39+
};

‎src/treeview/default-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { TreeView } from '@syncfusion/ej2-navigations';\n\n/**\n * TreeView default functionalities sample\n */\n\n let hierarchicalData: { [key: string]: Object }[] = [\n { id: '01', name: 'Local Disk (C:)', expanded: true,\n subChild: [\n {\n id: '01-01', name: 'Program Files',\n subChild: [\n { id: '01-01-01', name: 'Windows NT' },\n { id: '01-01-02', name: 'Windows Mail' },\n { id: '01-01-03', name: 'Windows Photo Viewer' },\n ]\n },\n {\n id: '01-02', name: 'Users', expanded: true,\n subChild: [\n { id: '01-02-01', name: 'Smith' },\n { id: '01-02-02', name: 'Public' },\n { id: '01-02-03', name: 'Admin' },\n ]\n },\n {\n id: '01-03', name: 'Windows',\n subChild: [\n { id: '01-03-01', name: 'Boot' },\n { id: '01-03-02', name: 'FileManager' },\n { id: '01-03-03', name: 'System32' },\n ]\n },\n ]\n },\n {\n id: '02', name: 'Local Disk (D:)',\n subChild: [\n {\n id: '02-01', name: 'Personals',\n subChild: [\n { id: '02-01-01', name: 'My photo.png' },\n { id: '02-01-02', name: 'Rental document.docx' },\n { id: '02-01-03', name: 'Pay slip.pdf' },\n ]\n },\n {\n id: '02-02', name: 'Projects',\n subChild: [\n { id: '02-02-01', name: 'ASP Application' },\n { id: '02-02-02', name: 'TypeScript Application' },\n { id: '02-02-03', name: 'React Application' },\n ]\n },\n {\n id: '02-03', name: 'Office',\n subChild: [\n { id: '02-03-01', name: 'Work details.docx' },\n { id: '02-03-02', name: 'Weekly report.docx' },\n { id: '02-03-03', name: 'Wish list.csv' },\n ]\n },\n ]\n },\n {\n id: '03', name: 'Local Disk (E:)', icon: 'folder',\n subChild: [\n {\n id: '03-01', name: 'Pictures',\n subChild: [\n { id: '03-01-01', name: 'Wind.jpg' },\n { id: '03-01-02', name: 'Stone.jpg' },\n { id: '03-01-03', name: 'Home.jpg' },\n ]\n },\n {\n id: '03-02', name: 'Documents',\n subChild: [\n { id: '03-02-01', name: 'Environment Pollution.docx' },\n { id: '03-02-02', name: 'Global Warming.ppt' },\n { id: '03-02-03', name: 'Social Network.pdf' },\n ]\n },\n {\n id: '03-03', name: 'Study Materials',\n subChild: [\n { id: '03-03-01', name: 'UI-Guide.pdf' },\n { id: '03-03-02', name: 'Tutorials.zip' },\n { id: '03-03-03', name: 'TypeScript.7z' },\n ]\n },\n ]\n }\n ];\n\n let treeObj: TreeView = new TreeView({\n fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' }\n });\n treeObj.appendTo('#tree');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\">\n <div id=\"tree\"></div>\n </div>\n</div>\n<style>\n .control_wrapper {\n max-width: 500px;\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n</style>\n\n\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

‎src/treeview/default.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div class="col-lg-12 control-section">
2+
<div class="control_wrapper">
3+
<div id="tree"></div>
4+
</div>
5+
</div>
6+
<style>
7+
.control_wrapper {
8+
max-width: 500px;
9+
margin: auto;
10+
border: 1px solid #dddddd;
11+
border-radius: 3px;
12+
}
13+
</style>
14+
15+
<div id="description">
16+
<p>The <code>TreeView</code> component is used to display the data in a hierarchical structure with configuration options to control the way the data is presented and manipulated. It will pull the data from a data source, such as an array of JSON objects, OData web services, or DataManager binding data fields to <code>fields</code> property.</p>
17+
<p>In this demo, the TreeView is populated with its minimum default settings.</p>
18+
<p>More information on the TreeView instantiation can be found in this <a href="../documentation/treeview/getting-started.html" target="_blank">documentation section</a>.</p>
19+
</div>

‎src/treeview/default.ts‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { TreeView } from '@syncfusion/ej2-navigations';
2+
3+
/**
4+
* TreeView default functionalities sample
5+
*/
6+
this.default = () => {
7+
let hierarchicalData: { [key: string]: Object }[] = [
8+
{ id: '01', name: 'Local Disk (C:)', expanded: true,
9+
subChild: [
10+
{
11+
id: '01-01', name: 'Program Files',
12+
subChild: [
13+
{ id: '01-01-01', name: 'Windows NT' },
14+
{ id: '01-01-02', name: 'Windows Mail' },
15+
{ id: '01-01-03', name: 'Windows Photo Viewer' },
16+
]
17+
},
18+
{
19+
id: '01-02', name: 'Users', expanded: true,
20+
subChild: [
21+
{ id: '01-02-01', name: 'Smith' },
22+
{ id: '01-02-02', name: 'Public' },
23+
{ id: '01-02-03', name: 'Admin' },
24+
]
25+
},
26+
{
27+
id: '01-03', name: 'Windows',
28+
subChild: [
29+
{ id: '01-03-01', name: 'Boot' },
30+
{ id: '01-03-02', name: 'FileManager' },
31+
{ id: '01-03-03', name: 'System32' },
32+
]
33+
},
34+
]
35+
},
36+
{
37+
id: '02', name: 'Local Disk (D:)',
38+
subChild: [
39+
{
40+
id: '02-01', name: 'Personals',
41+
subChild: [
42+
{ id: '02-01-01', name: 'My photo.png' },
43+
{ id: '02-01-02', name: 'Rental document.docx' },
44+
{ id: '02-01-03', name: 'Pay slip.pdf' },
45+
]
46+
},
47+
{
48+
id: '02-02', name: 'Projects',
49+
subChild: [
50+
{ id: '02-02-01', name: 'ASP Application' },
51+
{ id: '02-02-02', name: 'TypeScript Application' },
52+
{ id: '02-02-03', name: 'React Application' },
53+
]
54+
},
55+
{
56+
id: '02-03', name: 'Office',
57+
subChild: [
58+
{ id: '02-03-01', name: 'Work details.docx' },
59+
{ id: '02-03-02', name: 'Weekly report.docx' },
60+
{ id: '02-03-03', name: 'Wish list.csv' },
61+
]
62+
},
63+
]
64+
},
65+
{
66+
id: '03', name: 'Local Disk (E:)', icon: 'folder',
67+
subChild: [
68+
{
69+
id: '03-01', name: 'Pictures',
70+
subChild: [
71+
{ id: '03-01-01', name: 'Wind.jpg' },
72+
{ id: '03-01-02', name: 'Stone.jpg' },
73+
{ id: '03-01-03', name: 'Home.jpg' },
74+
]
75+
},
76+
{
77+
id: '03-02', name: 'Documents',
78+
subChild: [
79+
{ id: '03-02-01', name: 'Environment Pollution.docx' },
80+
{ id: '03-02-02', name: 'Global Warming.ppt' },
81+
{ id: '03-02-03', name: 'Social Network.pdf' },
82+
]
83+
},
84+
{
85+
id: '03-03', name: 'Study Materials',
86+
subChild: [
87+
{ id: '03-03-01', name: 'UI-Guide.pdf' },
88+
{ id: '03-03-02', name: 'Tutorials.zip' },
89+
{ id: '03-03-03', name: 'TypeScript.7z' },
90+
]
91+
},
92+
]
93+
}
94+
];
95+
96+
let treeObj: TreeView = new TreeView({
97+
fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' }
98+
});
99+
treeObj.appendTo('#tree');
100+
};

0 commit comments

Comments
 (0)