Repository navigation
Expand file tree
/
Copy pathtemplate-plnkr.json
More file actions
1 lines (1 loc) · 16.7 KB
/
Copy pathtemplate-plnkr.json
File metadata and controls
1 lines (1 loc) · 16.7 KB
1
{"datasource.js":"window.checkBoxData = [\r\n { id: 1, name: 'Australia', hasChild: true, expanded: true },\r\n { id: 2, pid: 1, name: 'New South Wales' },\r\n { id: 3, pid: 1, name: 'Victoria' },\r\n { id: 4, pid: 1, name: 'South Australia' },\r\n { id: 6, pid: 1, name: 'Western Australia' },\r\n { id: 7, name: 'Brazil', hasChild: true },\r\n { id: 8, pid: 7, name: 'Paraná' },\r\n { id: 9, pid: 7, name: 'Ceará' },\r\n { id: 10, pid: 7, name: 'Acre' },\r\n { id: 11, name: 'China', hasChild: true },\r\n { id: 12, pid: 11, name: 'Guangzhou' },\r\n { id: 13, pid: 11, name: 'Shanghai' },\r\n { id: 14, pid: 11, name: 'Beijing' },\r\n { id: 15, pid: 11, name: 'Shantou' },\r\n { id: 16, name: 'France', hasChild: true },\r\n { id: 17, pid: 16, name: 'Pays de la Loire' },\r\n { id: 18, pid: 16, name: 'Aquitaine' },\r\n { id: 19, pid: 16, name: 'Brittany' },\r\n { id: 20, pid: 16, name: 'Lorraine' },\r\n { id: 21, name: 'India', hasChild: true },\r\n { id: 22, pid: 21, name: 'Assam' },\r\n { id: 23, pid: 21, name: 'Bihar' },\r\n { id: 24, pid: 21, name: 'Tamil Nadu' },\r\n { id: 25, pid: 21, name: 'Punjab' }\r\n];\r\n// Hierarchical data source for TreeView component\r\nwindow.hierarchicalData = [\r\n { id: '01', name: 'Local Disk (C:)', expanded: true,\r\n subChild: [\r\n {\r\n id: '01-01', name: 'Program Files',\r\n subChild: [\r\n { id: '01-01-01', name: 'Windows NT' },\r\n { id: '01-01-02', name: 'Windows Mail' },\r\n { id: '01-01-03', name: 'Windows Photo Viewer' },\r\n ]\r\n },\r\n {\r\n id: '01-02', name: 'Users', expanded: true,\r\n subChild: [\r\n { id: '01-02-01', name: 'Smith' },\r\n { id: '01-02-02', name: 'Public' },\r\n { id: '01-02-03', name: 'Admin' },\r\n ]\r\n },\r\n {\r\n id: '01-03', name: 'Windows',\r\n subChild: [\r\n { id: '01-03-01', name: 'Boot' },\r\n { id: '01-03-02', name: 'FileManager' },\r\n { id: '01-03-03', name: 'System32' },\r\n ]\r\n },\r\n ]\r\n },\r\n { id: '02', name: 'Local Disk (D:)',\r\n subChild: [\r\n {\r\n id: '02-01', name: 'Personals',\r\n subChild: [\r\n { id: '02-01-01', name: 'My photo.png' },\r\n { id: '02-01-02', name: 'Rental document.docx' },\r\n { id: '02-01-03', name: 'Pay slip.pdf' },\r\n ]\r\n },\r\n {\r\n id: '02-02', name: 'Projects',\r\n subChild: [\r\n { id: '02-02-01', name: 'ASP Application' },\r\n { id: '02-02-02', name: 'TypeScript Application' },\r\n { id: '02-02-03', name: 'React Application' },\r\n ]\r\n },\r\n {\r\n id: '02-03', name: 'Office',\r\n subChild: [\r\n { id: '02-03-01', name: 'Work details.docx' },\r\n { id: '02-03-02', name: 'Weekly report.docx' },\r\n { id: '02-03-03', name: 'Wish list.csv' },\r\n ]\r\n },\r\n ]\r\n },\r\n { id: '03', name: 'Local Disk (E:)', icon: 'folder',\r\n subChild: [\r\n {\r\n id: '03-01', name: 'Pictures',\r\n subChild: [\r\n { id: '03-01-01', name: 'Wind.jpg' },\r\n { id: '03-01-02', name: 'Stone.jpg' },\r\n { id: '03-01-03', name: 'Home.jpg' },\r\n ]\r\n },\r\n {\r\n id: '03-02', name: 'Documents',\r\n subChild: [\r\n { id: '03-02-01', name: 'Environment Pollution.docx' },\r\n { id: '03-02-02', name: 'Global Warming.ppt' },\r\n { id: '03-02-03', name: 'Social Network.pdf' },\r\n ]\r\n },\r\n {\r\n id: '03-03', name: 'Study Materials',\r\n subChild: [\r\n { id: '03-03-01', name: 'UI-Guide.pdf' },\r\n { id: '03-03-02', name: 'Tutorials.zip' },\r\n { id: '03-03-03', name: 'TypeScript.7z' },\r\n ]\r\n },\r\n ]\r\n }\r\n];\r\n// Hierarchical data source for first TreeView component\r\nwindow.productTeam1 = [\r\n {\r\n id: 't1', name: 'ASP.NET MVC Team', expanded: true,\r\n child: [\r\n { id: 't2' , pid: 't1', name: 'Smith' },\r\n { id: 't3', pid: 't1', name: 'Johnson' },\r\n { id: 't4', pid: 't1', name: 'Anderson' },\r\n ]\r\n },\r\n {\r\n id: 't5', name: 'Windows Team', expanded: true,\r\n child: [\r\n { id: 't6', pid: 't5', name: 'Clark' },\r\n { id: 't7', pid: 't5', name: 'Wright' },\r\n { id: 't8', pid: 't5', name: 'Lopez' },\r\n ]\r\n },\r\n];\r\n// Hierarchical data source for second TreeView component\r\nwindow.productTeam2 = [\r\n {\r\n id: 't9' , name: 'Web Team',expanded: true,\r\n child: [\r\n { id: 't11' , pid: 't9' , name: 'Joshua' },\r\n { id: 't12', pid: 't9' , name: 'Matthew' },\r\n { id: 't13', pid: 't9' , name: 'David' },\r\n ]\r\n },\r\n {\r\n id: 't14', name: 'Build Team', expanded: true,\r\n child: [\r\n { id: 't15' , pid: 't14' , name: 'Ryan' },\r\n { id: 't16' , pid: 't14' , name: 'Justin' },\r\n { id: 't17' , pid: 't14', name: 'Robert' },\r\n ]\r\n },\r\n];\r\nwindow.treeData = [\r\n {\r\n id: 1, name: 'Discover Music', expanded: true,\r\n child: [\r\n { id: 2, name: 'Hot Singles' },\r\n { id: 3, name: 'Rising Artists' },\r\n { id: 4, name: 'Live Music' }\r\n ]\r\n },\r\n {\r\n id: 7, name: 'Sales and Events',\r\n child: [\r\n { id: 8, name: '100 Albums - $5 Each' },\r\n { id: 9, name: 'Hip-Hop and R&B Sale' },\r\n { id: 10, name: 'CD Deals' }\r\n ]\r\n },\r\n {\r\n id: 11, name: 'Categories',\r\n child: [\r\n { id: 12, name: 'Songs' },\r\n { id: 13, name: 'Bestselling Albums' },\r\n { id: 14, name: 'New Releases' },\r\n { id: 15, name: 'Bestselling Songs' }\r\n ]\r\n },\r\n {\r\n id: 16, name: 'MP3 Albums',\r\n child: [\r\n { id: 17, name: 'Rock' },\r\n { id: 18, name: 'Gospel' },\r\n { id: 19, name: 'Latin Music' },\r\n { id: 20, name: 'Jazz' }\r\n ]\r\n },\r\n {\r\n id: 21, name: 'More in Music',\r\n child: [\r\n { id: 22, name: 'Music Trade-In' },\r\n { id: 23, name: 'Redeem a Gift Card' },\r\n { id: 24, name: 'Band T-Shirts' }\r\n ]\r\n }\r\n];\r\nwindow.treeViewData = [\r\n {\r\n nodeId: '01', nodeText: 'Music', icon: 'folder',\r\n nodeChild: [\r\n { nodeId: '01-01', nodeText: 'Gouttes.mp3', icon: 'audio' }\r\n ]\r\n },\r\n {\r\n nodeId: '02', nodeText: 'Videos', icon: 'folder',\r\n nodeChild: [\r\n { nodeId: '02-01', nodeText: 'Naturals.mp4', icon: 'video' },\r\n { nodeId: '02-02', nodeText: 'Wild.mpeg', icon: 'video' },\r\n ]\r\n },\r\n {\r\n nodeId: '03', nodeText: 'Documents', icon: 'folder',\r\n nodeChild: [\r\n { nodeId: '03-01', nodeText: 'Environment Pollution.docx', icon: 'docx' },\r\n { nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx', icon: 'docx' },\r\n { nodeId: '03-03', nodeText: 'Global Warming.ppt', icon: 'ppt' },\r\n { nodeId: '03-04', nodeText: 'Social Network.pdf', icon: 'pdf' },\r\n { nodeId: '03-05', nodeText: 'Youth Empowerment.pdf', icon: 'pdf' },\r\n ]\r\n },\r\n {\r\n nodeId: '04', nodeText: 'Pictures', icon: 'folder', expanded: true,\r\n nodeChild: [\r\n {\r\n nodeId: '04-01', nodeText: 'Camera Roll', icon: 'folder', expanded: true,\r\n nodeChild: [\r\n { nodeId: '04-01-01', nodeText: 'WIN_20160726_094117.JPG', image: 'src/treeview/images/employees/9.png' },\r\n { nodeId: '04-01-02', nodeText: 'WIN_20160726_094118.JPG', image: 'src/treeview/images/employees/3.png' },\r\n ]\r\n },\r\n { nodeId: '04-02', nodeText: 'Wind.jpg', icon: 'images' },\r\n { nodeId: '04-03', nodeText: 'Stone.jpg', icon: 'images' },\r\n ]\r\n },\r\n {\r\n nodeId: '05', nodeText: 'Downloads', icon: 'folder',\r\n nodeChild: [\r\n { nodeId: '05-01', nodeText: 'UI-Guide.pdf', icon: 'pdf' },\r\n { nodeId: '05-02', nodeText: 'Tutorials.zip', icon: 'zip' },\r\n { nodeId: '05-03', nodeText: 'Game.exe', icon: 'exe' },\r\n { nodeId: '05-04', nodeText: 'TypeScript.7z', icon: 'zip' },\r\n ]\r\n },\r\n];\r\nwindow.continentData = [\r\n {\r\n code: 'NA', name: 'North America', expanded: true, countries: [\r\n { code: 'USA', name: 'United States of America', selected: true },\r\n { code: 'CUB', name: 'Cuba' },\r\n { code: 'MEX', name: 'Mexico' }\r\n ]\r\n },\r\n {\r\n code: 'AF', name: 'Africa', countries: [\r\n { code: 'NGA', name: 'Nigeria' },\r\n { code: 'EGY', name: 'Egypt' },\r\n { code: 'ZAF', name: 'South Africa' }\r\n ]\r\n },\r\n {\r\n code: 'AS', name: 'Asia', countries: [\r\n { code: 'CHN', name: 'China' },\r\n { code: 'IND', name: 'India' },\r\n { code: 'JPN', name: 'Japan' }\r\n ]\r\n },\r\n {\r\n code: 'EU', name: 'Europe', countries: [\r\n { code: 'DNK', name: 'Denmark' },\r\n { code: 'FIN', name: 'Finland' },\r\n { code: 'AUT', name: 'Austria' }\r\n ]\r\n },\r\n {\r\n code: 'SA', name: 'South America', countries: [\r\n { code: 'BRA', name: 'Brazil' },\r\n { code: 'COL', name: 'Colombia' },\r\n { code: 'ARG', name: 'Argentina' }\r\n ]\r\n },\r\n {\r\n code: 'OC', name: 'Oceania', countries: [\r\n { code: 'AUS', name: 'Australia' },\r\n { code: 'NZL', name: 'New Zealand' },\r\n { code: 'WSM', name: 'Samoa' }\r\n ]\r\n },\r\n {\r\n code: 'AN', name: 'Antarctica', countries: [\r\n { code: 'BVT', name: 'Bouvet Island' },\r\n { code: 'ATF', name: 'French Southern Lands' }\r\n ]\r\n },\r\n];\r\nwindow.localData = [\r\n { id: 1, name: 'Discover Music', hasChild: true, expanded: true },\r\n { id: 2, pid: 1, name: 'Hot Singles', selected: true },\r\n { id: 3, pid: 1, name: 'Rising Artists' },\r\n { id: 4, pid: 1, name: 'Live Music' },\r\n { id: 7, name: 'Sales and Events', hasChild: true },\r\n { id: 8, pid: 7, name: '100 Albums - $5 Each' },\r\n { id: 9, pid: 7, name: 'Hip-Hop and R&B Sale' },\r\n { id: 10, pid: 7, name: 'CD Deals' },\r\n { id: 11, name: 'Categories', hasChild: true },\r\n { id: 12, pid: 11, name: 'Songs' },\r\n { id: 13, pid: 11, name: 'Bestselling Albums' },\r\n { id: 14, pid: 11, name: 'New Releases' },\r\n { id: 15, pid: 11, name: 'Bestselling Songs' },\r\n { id: 16, name: 'MP3 Albums', hasChild: true },\r\n { id: 17, pid: 16, name: 'Rock' },\r\n { id: 18, pid: 16, name: 'Gospel' },\r\n { id: 19, pid: 16, name: 'Latin Music' },\r\n { id: 20, pid: 16, name: 'Jazz' },\r\n { id: 21, name: 'More in Music', hasChild: true },\r\n { id: 22, pid: 21, name: 'Music Trade-In' },\r\n { id: 23, pid: 21, name: 'Redeem a Gift Card' },\r\n { id: 24, pid: 21, name: 'Band T-Shirts' },\r\n { id: 25, name: 'Fiction Book Lists', hasChild: true },\r\n { id: 26, pid: 25, name: 'To Kill a Mockingbird' },\r\n { id: 27, pid: 25, name: 'Pride and Prejudice' },\r\n { id: 28, pid: 25, name: 'Harry Potter' },\r\n { id: 29, pid: 25, name: 'The Hobbit' },\r\n];\r\nwindow.mailBox = [\r\n { id: 1, name: 'Favorites', hasChild: true },\r\n { id: 2, pid: 1, name: 'Sales Reports', count: '4' },\r\n { id: 3, pid: 1, name: 'Sent Items' },\r\n { id: 4, pid: 1, name: 'Marketing Reports ', count: '6' },\r\n { id: 5, name: 'My Folder', hasChild: true, expanded: true },\r\n { id: 6, pid: 5, name: 'Inbox', selected: true, count: '20' },\r\n { id: 7, pid: 5, name: 'Drafts', count: '5' },\r\n { id: 8, pid: 5, name: 'Deleted Items' },\r\n { id: 9, pid: 5, name: 'Sent Items' },\r\n { id: 10, pid: 5, name: 'Sales Reports', count: '4' },\r\n { id: 11, pid: 5, name: 'Marketing Reports', count: '6' },\r\n { id: 13, pid: 5, name: 'Outbox' },\r\n];\r\nwindow.countries = [\r\n { id: 1, name: 'Australia', hasChild: true, expanded: true },\r\n { id: 2, parentId: 1, name: 'New South Wales' },\r\n { id: 3, parentId: 1, name: 'Victoria', isSelected: true },\r\n { id: 4, parentId: 1, name: 'South Australia', isSelected: true },\r\n { id: 6, parentId: 1, name: 'Western Australia' },\r\n { id: 7, name: 'Brazil', hasChild: true },\r\n { id: 8, parentId: 7, name: 'Paraná' },\r\n { id: 9, parentId: 7, name: 'Ceará' },\r\n { id: 10, parentId: 7, name: 'Acre' },\r\n { id: 11, name: 'China', hasChild: true },\r\n { id: 12, parentId: 11, name: 'Guangzhou' },\r\n { id: 13, parentId: 11, name: 'Shanghai' },\r\n { id: 14, parentId: 11, name: 'Beijing' },\r\n { id: 15, parentId: 11, name: 'Shantou' },\r\n { id: 16, name: 'France', hasChild: true },\r\n { id: 17, parentId: 16, name: 'Pays de la Loire' },\r\n { id: 18, parentId: 16, name: 'Aquitaine' },\r\n { id: 19, parentId: 16, name: 'Brittany' },\r\n { id: 20, parentId: 16, name: 'Lorraine' },\r\n { id: 21, name: 'India', hasChild: true },\r\n { id: 22, parentId: 21, name: 'Assam' },\r\n { id: 23, parentId: 21, name: 'Bihar' },\r\n { id: 24, parentId: 21, name: 'Tamil Nadu' },\r\n { id: 25, parentId: 21, name: 'Punjab' }\r\n];\r\n","index.html":"<!DOCTYPE html><html><head>\n<meta charset=\"UTF-8\">\n<link href=\"http://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n<link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<script type=\"text/javascript\">\n if (/MSIE d|Trident.*rv:/.test(navigator.userAgent)) {\n document.write(\"<script src='https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js'><\\/script>\");\n }\n</script>\n<script src=\"http://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\">\n <!-- Initialize TreeView -->\n <div id=\"tree\"></div>\n </div>\n</div>\n<style>\n .control_wrapper {\n max-width: 320px;\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n .e-treeview .e-list-text {\n width: 100%;\n }\n .treeCount.e-badge {\n padding: 0.4em;\n vertical-align: text-bottom;\n }\n .material .treeCount.e-badge {\n vertical-align: middle;\n }\n</style>\n<!-- Template to render tree node -->\n<script id=\"treeTemplate\" type=\"text/x-template\">\n <div>\n <div class=\"treeviewdiv\">\n <div style=\"float:left\">\n <span class=\"treeName\">${name}</span>\n </div>\n ${if(count)}\n <div style=\"margin-right: 5px; float:right\">\n <span class=\"treeCount e-badge e-badge-primary\" >${count}</span>\n </div>\n ${/if}\n </div>\n</div>\n</script>\n\n\n\n<script src=\"datasource.js\" type=\"text/javascript\"></script>\n\n<script src=\"index.js\" type=\"text/javascript\"></script>\n\n</body></html>","index.js":"ej.base.enableRipple(true)\n\r\n // Render the TreeView using template option\r\n var treeObj = new ej.navigations.TreeView({\r\n fields: { dataSource: window.mailBox, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },\r\n nodeTemplate: '#treeTemplate'\r\n });\r\n treeObj.appendTo('#tree');\r\n"}