feature(EJ2-3785): Merged the ComboBox to Master branch

Author: pipeline

src/combobox/cascading-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 { CascadingComboBoxComponent } from './cascading.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 { ComboBoxModule } from '@syncfusion/ej2-ng-dropdowns';\nimport { CheckBoxModule  } from '@syncfusion/ej2-ng-buttons';\nimport { FormsModule }   from '@angular/forms';\n\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n@NgModule({\n    imports: [ComboBoxModule, SharedModule, CheckBoxModule, FormsModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [CascadingComboBoxComponent],\nbootstrap: [CascadingComboBoxComponent]\n})\nexport class AppModule { }","cascading.component":"/**\n * ComboBox Cascading Sample\n */\nimport { Component, ViewChild } from '@angular/core';\nimport { Query } from '@syncfusion/ej2-data';\nimport { ComboBoxComponent } from '@syncfusion/ej2-ng-dropdowns';\n\n@Component({\n    selector: 'control-content',\n    templateUrl: 'cascading.html',\n    styleUrls: ['combobox.css']\n})\n\nexport class CascadingComboBoxComponent {\n    public country: { [key: string]: Object }[] = [\n        { countryName: 'Australia', countryId: '2' },\n        { countryName: 'United States', countryId: '1' }\n    ];\n    public state: { [key: string]: Object }[] = [\n        { stateName: 'New York', countryId: '1', stateId: '101' },\n        { stateName: 'Queensland', countryId: '2', stateId: '104' },\n        { stateName: 'Tasmania ', countryId: '2', stateId: '105' },\n        { stateName: 'Victoria', countryId: '2', stateId: '106' },\n        { stateName: 'Virginia ', countryId: '1', stateId: '102' },\n        { stateName: 'Washington', countryId: '1', stateId: '103' }\n    ];\n    public cities: { [key: string]: Object }[] = [\n        { cityName: 'Aberdeen', stateId: '103', cityId: 207 },\n        { cityName: 'Alexandria', stateId: '102', cityId: 204 },\n        { cityName: 'Albany', stateId: '101', cityId: 201 },\n        { cityName: 'Beacon ', stateId: '101', cityId: 202 },\n        { cityName: 'Brisbane ', stateId: '104', cityId: 211 },\n        { cityName: 'Cairns', stateId: '104', cityId: 212 },\n        { cityName: 'Colville ', stateId: '103', cityId: 208 },\n        { cityName: 'Devonport', stateId: '105', cityId: 215 },\n        { cityName: 'Emporia', stateId: '102', cityId: 206 },\n        { cityName: 'Geelong', stateId: '106', cityId: 218 },\n        { cityName: 'Hampton ', stateId: '102', cityId: 205 },\n        { cityName: 'Healesville ', stateId: '106', cityId: 217 },\n        { cityName: 'Hobart', stateId: '105', cityId: 213 },\n        { cityName: 'Launceston ', stateId: '105', cityId: 214 },\n        { cityName: 'Lockport', stateId: '101', cityId: 203 },\n        { cityName: 'Melbourne', stateId: '106', cityId: 216 },\n        { cityName: 'Pasco', stateId: '103', cityId: 209 },\n        { cityName: 'Townsville', stateId: '104', cityId: 210 }\n    ];\n    public countryFields: Object = { value: 'countryId', text: 'countryName' };\n    public stateFields: Object = { value: 'stateId', text: 'stateName' };\n    public cityFields: Object = { text: 'cityName', value: 'cityId' };\n    public countryWaterMark: string = 'Select a country';\n    public stateWaterMark: string = 'Select a state';\n    public cityWaterMark: string = 'Select a city';\n    @ViewChild('countryList')\n    public countryObj: ComboBoxComponent;\n    @ViewChild('stateList')\n    public stateObj: ComboBoxComponent;\n    @ViewChild('cityList')\n    public cityObj: ComboBoxComponent;\n    public onChange1(): void {\n        if (this.countryObj.value === null) {\n            this.stateObj.enabled = false;\n            this.cityObj.enabled = false;\n            this.stateObj.value = null;\n            this.cityObj.value = null;\n        } else {\n            this.stateObj.enabled = true;\n            let tempQuery: Query = new Query().where('countryId', 'equal', this.countryObj.value);\n            this.stateObj.query = tempQuery;\n            this.stateObj.value = null;\n            this.cityObj.value = null;\n            this.cityObj.enabled = false;\n        }\n        this.stateObj.dataBind();\n        this.cityObj.dataBind();\n    }\n    public onChange2(): void {\n        if (this.stateObj.value === null) {\n            this.cityObj.enabled = false;\n            this.cityObj.value = null;\n        } else {\n            this.cityObj.enabled = true;\n            let tempQuery: Query = new Query().where('stateId', 'equal', this.stateObj.value);\n            this.cityObj.query = tempQuery;\n            this.cityObj.value = null;\n        }\n        this.cityObj.dataBind();\n    }\n}","cascading.html":"<div class=\"control-section\">\n    <div class='control-wrapper' style='width: 250px; margin: 0 auto'>\n        <div class=\"padding-top\" style='padding-top: 35px;'>\n            <ej-combobox #countryList id='country' [dataSource]='country' [fields]='countryFields' (change)='onChange1()' [allowCustom]='false'\n                [placeholder]='countryWaterMark'></ej-combobox>\n        </div>\n        <div class=\"padding-top\" style='padding-top: 35px;'>\n            <ej-combobox #stateList id='state' [dataSource]='state' [fields]='stateFields' (change)='onChange2()' [allowCustom]='false'\n                [placeholder]='stateWaterMark' [enabled]='false'></ej-combobox>\n        </div>\n        <div class=\"padding-top\" style='padding-top: 35px;'>\n            <ej-combobox #cityList id='city' [dataSource]='cities' [fields]='cityFields' [placeholder]='cityWaterMark' [allowCustom]='false'\n                [enabled]='false'></ej-combobox>\n        </div>\n    </div>\n</div>\n","combobox.css":".control-section {\n    max-width: 350px;\n    margin: 0 auto;\n}","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\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/combobox/cascading.component.ts

@@ -0,0 +1,88 @@
+/**
+ * ComboBox Cascading Sample
+ */
+import { Component, ViewChild } from '@angular/core';
+import { Query } from '@syncfusion/ej2-data';
+import { ComboBoxComponent } from '@syncfusion/ej2-ng-dropdowns';
+
+@Component({
+    selector: 'control-content',
+    templateUrl: 'cascading.html',
+    styleUrls: ['combobox.css']
+})
+
+export class CascadingComboBoxComponent {
+    public country: { [key: string]: Object }[] = [
+        { countryName: 'Australia', countryId: '2' },
+        { countryName: 'United States', countryId: '1' }
+    ];
+    public state: { [key: string]: Object }[] = [
+        { stateName: 'New York', countryId: '1', stateId: '101' },
+        { stateName: 'Queensland', countryId: '2', stateId: '104' },
+        { stateName: 'Tasmania ', countryId: '2', stateId: '105' },
+        { stateName: 'Victoria', countryId: '2', stateId: '106' },
+        { stateName: 'Virginia ', countryId: '1', stateId: '102' },
+        { stateName: 'Washington', countryId: '1', stateId: '103' }
+    ];
+    public cities: { [key: string]: Object }[] = [
+        { cityName: 'Aberdeen', stateId: '103', cityId: 207 },
+        { cityName: 'Alexandria', stateId: '102', cityId: 204 },
+        { cityName: 'Albany', stateId: '101', cityId: 201 },
+        { cityName: 'Beacon ', stateId: '101', cityId: 202 },
+        { cityName: 'Brisbane ', stateId: '104', cityId: 211 },
+        { cityName: 'Cairns', stateId: '104', cityId: 212 },
+        { cityName: 'Colville ', stateId: '103', cityId: 208 },
+        { cityName: 'Devonport', stateId: '105', cityId: 215 },
+        { cityName: 'Emporia', stateId: '102', cityId: 206 },
+        { cityName: 'Geelong', stateId: '106', cityId: 218 },
+        { cityName: 'Hampton ', stateId: '102', cityId: 205 },
+        { cityName: 'Healesville ', stateId: '106', cityId: 217 },
+        { cityName: 'Hobart', stateId: '105', cityId: 213 },
+        { cityName: 'Launceston ', stateId: '105', cityId: 214 },
+        { cityName: 'Lockport', stateId: '101', cityId: 203 },
+        { cityName: 'Melbourne', stateId: '106', cityId: 216 },
+        { cityName: 'Pasco', stateId: '103', cityId: 209 },
+        { cityName: 'Townsville', stateId: '104', cityId: 210 }
+    ];
+    public countryFields: Object = { value: 'countryId', text: 'countryName' };
+    public stateFields: Object = { value: 'stateId', text: 'stateName' };
+    public cityFields: Object = { text: 'cityName', value: 'cityId' };
+    public countryWaterMark: string = 'Select a country';
+    public stateWaterMark: string = 'Select a state';
+    public cityWaterMark: string = 'Select a city';
+    @ViewChild('countryList')
+    public countryObj: ComboBoxComponent;
+    @ViewChild('stateList')
+    public stateObj: ComboBoxComponent;
+    @ViewChild('cityList')
+    public cityObj: ComboBoxComponent;
+    public onChange1(): void {
+        if (this.countryObj.value === null) {
+            this.stateObj.enabled = false;
+            this.cityObj.enabled = false;
+            this.stateObj.value = null;
+            this.cityObj.value = null;
+        } else {
+            this.stateObj.enabled = true;
+            let tempQuery: Query = new Query().where('countryId', 'equal', this.countryObj.value);
+            this.stateObj.query = tempQuery;
+            this.stateObj.value = null;
+            this.cityObj.value = null;
+            this.cityObj.enabled = false;
+        }
+        this.stateObj.dataBind();
+        this.cityObj.dataBind();
+    }
+    public onChange2(): void {
+        if (this.stateObj.value === null) {
+            this.cityObj.enabled = false;
+            this.cityObj.value = null;
+        } else {
+            this.cityObj.enabled = true;
+            let tempQuery: Query = new Query().where('stateId', 'equal', this.stateObj.value);
+            this.cityObj.query = tempQuery;
+            this.cityObj.value = null;
+        }
+        this.cityObj.dataBind();
+    }
+}

src/combobox/cascading.html

@@ -0,0 +1,29 @@
+<div class="control-section">
+    <div class='control-wrapper' style='width: 250px; margin: 0 auto'>
+        <div class="padding-top" style='padding-top: 35px;'>
+            <ej-combobox #countryList id='country' [dataSource]='country' [fields]='countryFields' (change)='onChange1()' [allowCustom]='false'
+                [placeholder]='countryWaterMark'></ej-combobox>
+        </div>
+        <div class="padding-top" style='padding-top: 35px;'>
+            <ej-combobox #stateList id='state' [dataSource]='state' [fields]='stateFields' (change)='onChange2()' [allowCustom]='false'
+                [placeholder]='stateWaterMark' [enabled]='false'></ej-combobox>
+        </div>
+        <div class="padding-top" style='padding-top: 35px;'>
+            <ej-combobox #cityList id='city' [dataSource]='cities' [fields]='cityFields' [placeholder]='cityWaterMark' [allowCustom]='false'
+                [enabled]='false'></ej-combobox>
+        </div>
+    </div>
+</div>
+
+<div id="description">
+    <p>The <code>Cascading</code> ComboBox is the series of ComboBox, where the value of one ComboBox depends on the another
+        ComboBox value. This can be configured by making use of the <code>change</code> event of parent ComboBox. Within
+        that change event handler, you should load the data to child ComboBox based on selected value of parent ComboBox.</p>
+
+    <p>In this sample, if a country is selected from countries ComboBox, then respective states will load in second ComboBox
+        and the same has done between states and cities ComboBox.</p>
+
+    <p> More information on the Cascading feature configuration can be found in this
+        <a href="../documentation/combo-box/how-to.html#configure-the-cascading-combobox" target="_blank"> documentation section</a>.
+    </p>
+</div>

src/combobox/combobox.css

@@ -0,0 +1,4 @@
+.control-section {
+    max-width: 350px;
+    margin: 0 auto;
+}

src/combobox/combobox.module.ts

@@ -0,0 +1,38 @@
+import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ComboBoxModule } from '@syncfusion/ej2-ng-dropdowns';
+import { CheckBoxModule  } from '@syncfusion/ej2-ng-buttons';
+import { FormsModule }   from '@angular/forms';
+import { DefaultComboBoxComponent } from './default.component';
+import { GroupAndIconComboBoxComponent } from './groupingicon.component';
+import { DataBindingComboBoxComponent } from './databinding.component';
+import { TemplateComboBoxComponent } from './template.component';
+import { CascadingComboBoxComponent } from './cascading.component';
+import { FilteringComboBoxComponent } from './filtering.component';
+import { SharedModule } from '../common/shared.module';
+export const comboboxAppRoutes: Object[] = [
+    { path: ':theme/combobox/default', component: DefaultComboBoxComponent, name: 'Default Functionalities', category: 'ComboBox' },
+    { path: ':theme/combobox/groupingicon', component: GroupAndIconComboBoxComponent, name: 'Grouping and Icons', category: 'ComboBox' },
+    { path: ':theme/combobox/databinding', component: DataBindingComboBoxComponent, name: 'Data Binding', category: 'ComboBox' },
+    { path: ':theme/combobox/template', component: TemplateComboBoxComponent, name: 'Template', category: 'ComboBox' },
+     { path: ':theme/combobox/filtering', component: FilteringComboBoxComponent, name: 'Filtering', category: 'ComboBox' },
+    { path: ':theme/combobox/cascading', component: CascadingComboBoxComponent, name: 'Cascading', category: 'ComboBox' }
+
+];
+
+export const ComboBoxRouter: ModuleWithProviders = RouterModule.forChild(comboboxAppRoutes);
+
+@NgModule({
+    imports: [ComboBoxRouter, ComboBoxModule, SharedModule, CheckBoxModule, FormsModule],
+    declarations: [
+        DefaultComboBoxComponent,
+        GroupAndIconComboBoxComponent,
+        DataBindingComboBoxComponent,
+        TemplateComboBoxComponent,
+        CascadingComboBoxComponent,
+        FilteringComboBoxComponent
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ComboBoxSampleModule {
+}