feature(EJ2-4805): Merged the TreeView React samples

Author: pipeline

src/common/samplelist.ts

@@ -6,6 +6,7 @@ import { toolbarAppRoutes } from '../toolbar/toolbar.module';
 import { accordionAppRoutes } from '../accordion/accordion.module';
 import { numericAppRoutes } from '../numerictextbox/numerictextbox.module';
 import { dropdownlistAppRoutes } from '../dropdownlist/dropdownlist.module';
+import { treeAppRoutes } from '../treeview/treeview.module';
 import { comboboxAppRoutes } from '../combobox/combobox.module';
 import { autoCompleteAppRoutes } from '../autocomplete/autocomplete.module';
 import { calendarAppRoutes } from '../calendar/calendar.module';
@@ -82,6 +83,9 @@ export let samplesList: any = [
     },
     {
         'name': 'Toolbar', 'category': 'Navigation', 'order': '05', 'path': 'toolbar', 'samples': toolbarAppRoutes
+    },
+     {
+        'name': 'TreeView', 'category': 'Navigation', 'order': '05', 'path': 'treeview', 'samples': treeAppRoutes, "type": "new"
     },
     {
         'name': 'Tooltip', 'category': 'Layout', 'order': '04', 'path': 'tooltip', 'samples': tooltipAppRoutes

src/common/sb.router.ts

@@ -10,6 +10,7 @@ import { DateRangePickerSampleModule } from '../daterangepicker/daterangepicker.
 import { TimePickerSampleModule } from '../timepicker/timepicker.module';
 import { ButtonModule } from '../button/button.module';
 import { ListViewSampleModule } from '../listview/listview.module';
+import { TreeViewSampleModule } from '../treeview/treeview.module';
 import { GridSampleModule } from '../grid/grid.module';
 import { ToolbarSampleModule } from '../toolbar/toolbar.module';
 import { AccordionSampleModule } from '../accordion/accordion.module';
@@ -45,6 +46,7 @@ const appRoutes: any = [
     { path: 'textboxes', loadChildren: TextboxesModule },
     { path: 'toolbar', loadChildren: ToolbarSampleModule },
     { path: 'accordion', loadChildren: AccordionSampleModule },
+    { path: 'treeview', loadChildren: TreeViewSampleModule },
     { path: 'tooltip', loadChildren: TooltipSampleModule },
     { path: 'maskedtextbox', loadChildren: MaskedTextBoxSampleModule },
     { path: 'multiselect', loadChildren: MultiSelectSampleModule },
@@ -74,6 +76,7 @@ const appRoutes: any = [
         DialogSampleModule,
         ToolbarSampleModule,
         AccordionSampleModule,
+        TreeViewSampleModule,
         TooltipSampleModule,
         MaskedTextBoxSampleModule,
         MultiSelectSampleModule,

src/treeview/checkbox-plnkr.json

@@ -0,0 +1 @@
+{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n    imports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ],\n     \n    exports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ]\n})\nexport class SharedModule { }\n","app.module":"import { CheckboxTreeViewComponent } from './checkbox.component';\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\nimport { TreeViewModule } from '@syncfusion/ej2-ng-navigations';\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n\n@NgModule({\n    imports: [TreeViewModule, SharedModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [CheckboxTreeViewComponent],\nbootstrap: [CheckboxTreeViewComponent]\n})\nexport class AppModule { }","checkbox.component":"import { Component, Inject } from '@angular/core';\n\n/**\n * TreeView Checkboxes sample\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'checkbox.html'\n})\nexport class CheckboxTreeViewComponent {\n\n   public countries: 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    public field:Object ={ dataSource: this.countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };\n    public showCheckBox:boolean = true;\n}","checkbox.html":"<div class=\"control-section\" style=\"overflow:hidden;\">\n    <div class=\"col-lg-12\">\n    <div class=\"control_wrapper\">\n        <ej-treeview id=\"checkbox\" [fields]='field' [showCheckBox]='showCheckBox'></ej-treeview>\n    </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>","index.html":"<!DOCTYPE html>\n<html>\n    \n    <head>\n        <meta name=\"author\" content=\"Syncfusion\" />\n        <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n        <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n        <script src=\"https://unpkg.com/[email protected]\"></script>\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    \n    <body>\n        <control-content>\n            <div id='loader'>Loading...</div>\n        </control-content>\n    </body>\n    \n    </html>\n    ","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        \"angular:\": \"https://unpkg.com/@angular/\"\n    },\n    map: {\n        main: 'main.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-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-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.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-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\n        \n        \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n        \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n        \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n        \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n        \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n        \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n        \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n        \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n        \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n        \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n        \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n        '@angular/core': 'angular:core/bundles/core.umd.js',\n        '@angular/common': 'angular:common/bundles/common.umd.js',\n        '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n        '@angular/http': 'angular:http/bundles/http.umd.js',\n        '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n        '@angular/router': 'angular:router/bundles/router.umd.js',\n        '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/material': 'angular:material/bundles/material.umd.js',\n        'rxjs': 'https://unpkg.com/rxjs'\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}

src/treeview/checkbox.component.ts

@@ -0,0 +1,40 @@
+import { Component, Inject } from '@angular/core';
+
+/**
+ * TreeView Checkboxes sample
+ */
+@Component({
+    selector: 'control-content',
+    templateUrl: 'checkbox.html'
+})
+export class CheckboxTreeViewComponent {
+
+   public countries: Object[] = [
+        { id: 1, name: 'Australia', hasChild: true, expanded: true },
+        { id: 2, pid: 1, name: 'New South Wales' },
+        { id: 3, pid: 1, name: 'Victoria' },
+        { id: 4, pid: 1, name: 'South Australia' },
+        { id: 6, pid: 1, name: 'Western Australia' },
+        { id: 7, name: 'Brazil', hasChild: true },
+        { id: 8, pid: 7, name: 'Paraná' },
+        { id: 9, pid: 7, name: 'Ceará' },
+        { id: 10, pid: 7, name: 'Acre' },
+        { id: 11, name: 'China', hasChild: true },
+        { id: 12, pid: 11, name: 'Guangzhou' },
+        { id: 13, pid: 11, name: 'Shanghai' },
+        { id: 14, pid: 11, name: 'Beijing' },
+        { id: 15, pid: 11, name: 'Shantou' },
+        { id: 16, name: 'France', hasChild: true },
+        { id: 17, pid: 16, name: 'Pays de la Loire' },
+        { id: 18, pid: 16, name: 'Aquitaine' },
+        { id: 19, pid: 16, name: 'Brittany' },
+        { id: 20, pid: 16, name: 'Lorraine' },
+        { id: 21, name: 'India', hasChild: true },
+        { id: 22, pid: 21, name: 'Assam' },
+        { id: 23, pid: 21, name: 'Bihar' },
+        { id: 24, pid: 21, name: 'Tamil Nadu' },
+        { id: 25, pid: 21, name: 'Punjab' }
+    ];
+    public field:Object ={ dataSource: this.countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
+    public showCheckBox:boolean = true;
+}

src/treeview/checkbox.html

@@ -0,0 +1,20 @@
+<div class="control-section" style="overflow:hidden;">
+    <div class="col-lg-12">
+    <div class="control_wrapper">
+        <ej-treeview id="checkbox" [fields]='field' [showCheckBox]='showCheckBox'></ej-treeview>
+    </div>
+    </div>
+</div>
+<div id="description">
+    <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>
+    <p>In this demo, the TreeView was populated with checkbox enabled.</p>
+    <p>For more information, you can refer the <a href="../documentation/treeview/checkboxes.html" target="_blank">Checkboxes</a> section from the documentation.</p>
+</div>
+<style>
+    .control_wrapper {
+        max-width: 500px;
+        margin: auto;
+        border: 1px solid #dddddd;
+        border-radius: 3px;
+    }
+</style>