feature(EJ2-3995): column chooser samples

Author: pipeline

package.json

@@ -1,59 +1,59 @@
 {
-  "name": "@syncfusion/ej2-ng-samples",
-  "version": "1.0.16",
-  "description": "Essential JS 2 Sample Browser for Angular",
-  "author": "Syncfusion Inc.",
-  "license": "SEE LICENSE IN license",
-  "dependencies": {
-    "@angular/common": "^4.3.0",
-    "@angular/compiler": "^4.3.0",
-    "@angular/core": "^4.3.0",
-    "@angular/forms": "^4.3.0",
-    "@angular/http": "^4.3.0",
-    "@angular/upgrade": "^4.3.0",
-    "@angular/platform-browser": "^4.3.0",
-    "@angular/platform-browser-dynamic": "^4.3.0",
-    "@angular/router": "^4.3.0",
-    "zone.js": "^0.8.4",
-    "core-js": "^2.4.1",
-    "rxjs": "^5.0.1",
-    "@syncfusion/ej2": "^1.0.16",
-    "@syncfusion/ej2-ng-base": "^1.0.16",
-    "@syncfusion/ej2-ng-buttons": "^1.0.14",
-    "@syncfusion/ej2-ng-lists": "^1.0.14",
-    "@syncfusion/ej2-ng-grids": "^1.0.16",
-    "@syncfusion/ej2-ng-charts": "^1.0.16",
-    "@syncfusion/ej2-ng-circulargauge": "^1.0.14",
-    "@syncfusion/ej2-ng-lineargauge": "^1.0.14",
-    "@syncfusion/ej2-ng-dropdowns": "^1.0.16",
-    "@syncfusion/ej2-ng-calendars": "^1.0.16",
-    "@syncfusion/ej2-ng-navigations": "^1.0.14",
-    "@syncfusion/ej2-ng-inputs": "^1.0.16",
-    "@syncfusion/ej2-ng-popups": "^1.0.16",
-    "systemjs": "^0.19.40",
-    "reflect-metadata": "^0.1.9"
-  },
-  "devDependencies": {
-    "@angular/compiler-cli": "^4.3.0",
-    "@angular/platform-server": "^4.3.0",
-    "@types/jasmine": "^2.2.29",
-    "@types/requirejs": "^2.1.26",
-    "@types/node": "^6.0.46",
-    "es6-module-loader": "^0.17.11",
-    "gulp-clean": "^0.3.2",
-    "karma-systemjs": "^0.16.0",
-    "systemjs-plugin-babel": "0.0.17",
-    "es6-promise": "^3.2.1",
-    "gulp": "^3.9.1",
-    "gulp-sass": "^3.1.0",
-    "gulp-typescript": "^3.1.6",
-    "requirejs": "^2.3.3",
-    "typescript": "2.3.4",
-    "browser-sync": "2.11.2",
-    "webpack": "2.5.1"
-  },
-  "scripts": {
-    "build": "gulp styles && ngc -p tsconfig-aot.json && gulp bundle",
-    "serve": "npm run build && gulp serve"
-  }
+	"name": "@syncfusion/ej2-ng-samples",
+	"version": "0.0.1",
+	"description": "Essential JS 2 Sample Browser for Angular",
+	"author": "Syncfusion Inc.",
+	"license": "SEE LICENSE IN license",
+	"dependencies": {
+		"@angular/common": "^4.3.0",
+		"@angular/compiler": "^4.3.0",
+		"@angular/core": "^4.3.0",
+		"@angular/forms": "^4.3.0",
+		"@angular/http": "^4.3.0",
+		"@angular/upgrade": "^4.3.0",
+		"@angular/platform-browser": "^4.3.0",
+		"@angular/platform-browser-dynamic": "^4.3.0",
+		"@angular/router": "^4.3.0",
+		"zone.js": "^0.8.4",
+		"core-js": "^2.4.1",
+		"rxjs": "^5.0.1",
+		"@syncfusion/ej2": "*",
+		"@syncfusion/ej2-ng-base": "*",
+		"@syncfusion/ej2-ng-buttons": "*",
+		"@syncfusion/ej2-ng-lists": "*",
+		"@syncfusion/ej2-ng-grids": "*",
+		"@syncfusion/ej2-ng-charts": "*",
+		"@syncfusion/ej2-ng-circulargauge": "*",
+		"@syncfusion/ej2-ng-lineargauge": "*",
+		"@syncfusion/ej2-ng-dropdowns": "*",
+		"@syncfusion/ej2-ng-calendars": "*",
+		"@syncfusion/ej2-ng-navigations": "*",
+		"@syncfusion/ej2-ng-inputs": "*",
+		"@syncfusion/ej2-ng-popups": "*",
+		"systemjs": "^0.19.40",
+		"reflect-metadata": "^0.1.9"
+	},
+	"devDependencies": {
+		"@angular/compiler-cli": "^4.3.0",
+		"@angular/platform-server": "^4.3.0",
+		"@types/jasmine": "^2.2.29",
+		"@types/requirejs": "^2.1.26",
+		"@types/node": "^6.0.46",
+		"es6-module-loader": "^0.17.11",
+		"gulp-clean": "^0.3.2",
+		"karma-systemjs": "^0.16.0",
+		"systemjs-plugin-babel": "0.0.17",
+		"es6-promise": "^3.2.1",
+		"gulp": "^3.9.1",
+		"gulp-sass": "^3.1.0",
+		"gulp-typescript": "^3.1.6",
+		"requirejs": "^2.3.3",
+		"typescript": "2.3.4",
+		"browser-sync": "2.11.2",
+		"webpack": "2.5.1"
+	},
+	"scripts": {
+		"build": "gulp styles && ngc -p tsconfig-aot.json && gulp bundle",
+		"serve": "npm run build && gulp serve"
+	}
 }

src/grid/aggregatedefault-plnkr.json

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { ToolbarService } from '@syncfusion/ej2-ng-grids';
+import { data } from '../data';
+
+@Component({
+    selector: 'ej2-grid-container',
+    templateUrl: 'columnchooser.html',
+    providers: [ToolbarService]
+})
+export class ColumnChooserComponent implements OnInit {
+    public data: Object[];
+    public toolbar: string[];
+    ngOnInit(): void {
+         this.data = data;
+          this.toolbar = ['columnchooser'];
+    }
+}

src/grid/aggregategroup-plnkr.json

@@ -0,0 +1,31 @@
+<div class="control-section">
+    <ej-grid [dataSource]='data' allowPaging='true' showColumnChooser='true' [toolbar]="toolbar">
+        <e-columns>
+            <e-column field='OrderID' headerText='Order ID' width='120' textAlign="right"></e-column>
+            <e-column field='CustomerName' headerText='Customer Name' width='150' showInColumnChooser='false'></e-column>
+            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign="right"></e-column>
+            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign="right"></e-column>
+			<e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign="right"></e-column>
+            <e-column field='ShipCountry' headerText='Ship Country' visible='false' width='150'></e-column>
+			<e-column field='ShipCity' headerText='Ship City' visible='false' width='150'></e-column>
+        </e-columns>
+    </ej-grid>
+    <div id="description">
+        <p>The Grid columns can be shown/hidden dynamically by using column chooser. To enable column chooser behavior, set
+            <code><a target="_blank" class="code"
+        href="http://ej2.syncfusion.com/angular/documentation/grid/api-grid.html#showColumnChooser-boolean">showColumnChooser
+        </a></code> property as true. You can also prevent to display the particular column in column chooser
+            by setting
+            <code><a target="_blank" class="code"
+        href="http://ej2.syncfusion.com/angular/documentation/grid/api-column.html#showInColumnChooser-boolean">columns->showInColumnChooser
+        </a></code> as false in columns definition.
+
+        </p>
+        <br/>
+
+        <p>
+            In this demo, when the user clicks column chooser icon from the toolbar, then column chooser menu will open, user the can
+            show or hide the columns by changing the state of the checkbox.
+        </p>
+    </div>
+	</div>