Skip to content

Commit b8883ee

Browse files
author
pipeline
committed
sample(EJ2-3573): DropDownList samples merged in master
1 parent 1ac98dc commit b8883ee

26 files changed

+720
-21
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@syncfusion/ej2-ng-lists": "*",
2424
"@syncfusion/ej2-ng-grids": "*",
2525
"@syncfusion/ej2-ng-charts": "*",
26+
"@syncfusion/ej2-ng-dropdowns": "*",
2627
"@syncfusion/ej2-ng-calendars": "*",
2728
"@syncfusion/ej2-ng-navigations": "*",
2829
"@syncfusion/ej2-ng-inputs": "*",

‎src/chart/bubble.component.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,13 @@ export class BubbleChartComponent {
1919
{ x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
2020
{ x: 99.4, y: 2.2, size: 0.312, text: 'US' },
2121
{ x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
22-
{ x: 54.9, y: 3.7, size: 0.177, text: 'Pakistan' },
2322
{ x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
2423
{ x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
2524
{ x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
2625
{ x: 99, y: 0.2, size: 0.128, text: 'Japan' },
2726
{ x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
2827
{ x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
29-
{ x: 61.3, y: 14.5, size: 0.162, text: 'Nigeria' },
30-
{ x: 56.8, y: 6.1, size: 0.151, text: 'Bangladesh' }];
28+
{ x: 61.3, y: 14.5, size: 0.162, text: 'Nigeria' }];
3129

3230
public primaryXAxis: Object = {
3331
title: 'Literacy Rate',
@@ -52,8 +50,8 @@ export class BubbleChartComponent {
5250
};
5351

5452
public pointRender(args: IPointRenderEventArgs): void {
55-
let seriesColor: string[] = ['#E94649', '#F6B53F', '#6FAAB0', '#C4C24A', '#FB954F', '#D9CEB2', '#FF8D8D',
56-
'#69D2E7', '#E27F2D', '#6A4B82', '#F6B53F', '#C4C24A', '#FF8D8D', '#69D2E7'];
53+
let seriesColor: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',
54+
'#ea7a57', '#404041', '#00bdae' ];
5755
args.fill = seriesColor[args.point.index];
5856
};
5957

‎src/chart/chart.module.ts‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,7 @@
44
import { NgModule, ModuleWithProviders, Type } from '@angular/core';
55
import { RouterModule } from '@angular/router';
66
import { ButtonModule } from '@syncfusion/ej2-ng-buttons';
7-
8-
import {
9-
ChartModule, LineSeriesService,
10-
CategoryService, SplineSeriesService, AreaSeriesService, DateTimeService, MarkerService, StackingAreaSeriesService,
11-
StackingBarSeriesService, StackingColumnSeriesService, ScatterSeriesService, StepLineSeriesService,
12-
LogarithmicService, BarSeriesService, ColumnSeriesService, TooltipService, CrosshairService,
13-
ZoomService, SelectionService, LegendService, DataLabelService, BubbleSeriesService, RangeColumnSeriesService
14-
} from '@syncfusion/ej2-ng-charts';
7+
import { ChartAllModule } from '@syncfusion/ej2-ng-charts';
158

169
import { LineChartComponent } from './line.component';
1710
import { AreaChartComponent } from './area.component';
@@ -89,14 +82,10 @@ let declarations: Type<Object>[] = [LineChartComponent, ColumnChartComponent, Ba
8982
PercentStackedAreaChartComponent, PercentStackedBarChartComponent, PercentStackedColumnChartComponent, DateTimeAxisChartComponent,
9083
BubbleChartComponent, RangeColumnChartComponent];
9184
@NgModule({
92-
imports: [chartRouter, ChartModule, SharedModule, ButtonModule],
85+
imports: [chartRouter, ChartAllModule, SharedModule, ButtonModule],
9386
exports: [],
9487
declarations: declarations,
95-
providers: [LineSeriesService, AreaSeriesService, DateTimeService, CategoryService, MarkerService, StackingAreaSeriesService,
96-
TooltipService, CrosshairService, SplineSeriesService, StackingBarSeriesService, StackingColumnSeriesService, ScatterSeriesService,
97-
StepLineSeriesService, LogarithmicService, BarSeriesService, ColumnSeriesService, ZoomService, SelectionService, LegendService,
98-
DataLabelService, BubbleSeriesService, RangeColumnSeriesService
99-
]
88+
providers: [ChartAllModule]
10089
})
10190
export class ChartSampleModule {
10291
}

‎src/common/samplelist.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { listAppRoutes } from '../listview/listview.module';
44
import { gridRouteConfig } from '../grid/grid.module';
55
import { toolbarAppRoutes } from '../toolbar/toolbar.module';
66
import { numericAppRoutes } from '../numerictextbox/numericTextBox.module';
7+
import { dropdownlistAppRoutes } from '../dropdownlist/dropdownlist.module';
78
import { calendarAppRoutes } from '../calendar/calendar.module';
89
import { chartAppRoutes } from '../chart/chart.module';
910
import { dialogAppRoutes } from '../dialog/dialog.module';
@@ -25,6 +26,9 @@ export let samplesList: any = [
2526
{
2627
'name': 'Calendar', 'category': 'Editors', 'order': '03', 'path': 'calendar', 'samples': calendarAppRoutes
2728
},
29+
{
30+
'name': 'DropDownList', 'category': 'Editors', 'order': '03', 'path': 'dropdownlist', 'samples': dropdownlistAppRoutes, 'type': 'new'
31+
},
2832
{
2933
'name': 'NumericTextBox', 'category': 'Editors', 'order': '03', 'path': 'numerictextbox', 'samples': numericAppRoutes
3034
},

‎src/common/sb.router.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { NgModule } from '@angular/core';
22
import { RouterModule } from '@angular/router';
33
import { FormValidatorModule } from '../form-validator/form-validator.module';
4+
import { DropDownListSampleModule } from '../dropdownlist/dropdownlist.module';
45
import { CalendarSampleModule } from '../calendar/calendar.module';
56
import { ButtonModule } from '../button/button.module';
67
import { ListViewSampleModule } from '../listview/listview.module';
@@ -17,6 +18,7 @@ const appRoutes: any = [
1718
{ path: 'grid', loadChildren: GridSampleModule },
1819
{ path: 'form-validator', loadChildren: FormValidatorModule },
1920
{ path: 'Button', loadChildren: ButtonModule },
21+
{ path: 'dropdownlist', loadChildren: DropDownListSampleModule },
2022
{ path: 'calendar', loadChildren: CalendarSampleModule },
2123
{ path: 'numerictextbox', loadChildren: NumericModule },
2224
{ path: 'listview', loadChildren: ListViewSampleModule },
@@ -33,6 +35,7 @@ const appRoutes: any = [
3335
GridSampleModule,
3436
FormValidatorModule,
3537
ButtonModule,
38+
DropDownListSampleModule,
3639
CalendarSampleModule,
3740
NumericModule,
3841
ListViewSampleModule,

‎src/common/shared.module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import { NgModule } from '@angular/core';
22
import { ButtonModule } from '@syncfusion/ej2-ng-buttons';
3+
import { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';
34

45
import {SBDescriptionComponent} from './dp.component';
56
@NgModule({
67
imports: [
7-
ButtonModule
8+
ButtonModule,
9+
DropDownListModule
810
],
911
declarations: [
1012
SBDescriptionComponent
1113
],
1214
exports: [
1315
ButtonModule,
16+
DropDownListModule,
1417
SBDescriptionComponent
1518
]
1619
})

‎src/dropdownlist/cascading.component.ts‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
import { Query } from '@syncfusion/ej2-data';
3+
import { DropDownListComponent } from '@syncfusion/ej2-ng-dropdowns';
4+
5+
@Component({
6+
selector: 'control-content',
7+
templateUrl: 'cascading.html',
8+
styleUrls: ['dropdownlist.css']
9+
})
10+
11+
export class CascadingDropDownListComponent {
12+
public country: { [key: string]: Object }[] = [
13+
{ countryName: 'United States', countryId: '1' },
14+
{ countryName: 'Australia', countryId: '2' }
15+
];
16+
public state: { [key: string]: Object }[] = [
17+
{ stateName: 'New York', countryId: '1', stateId: '101' },
18+
{ stateName: 'Virginia ', countryId: '1', stateId: '102' },
19+
{ stateName: 'Washington', countryId: '1', stateId: '103' },
20+
{ stateName: 'Queensland', countryId: '2', stateId: '104' },
21+
{ stateName: 'Tasmania ', countryId: '2', stateId: '105' },
22+
{ stateName: 'Victoria', countryId: '2', stateId: '106' }
23+
];
24+
public cities: { [key: string]: Object }[] = [
25+
{ cityName: 'Albany', stateId: '101', cityId: 201 },
26+
{ cityName: 'Beacon ', stateId: '101', cityId: 202 },
27+
{ cityName: 'Lockport', stateId: '101', cityId: 203 },
28+
{ cityName: 'Alexandria', stateId: '102', cityId: 204 },
29+
{ cityName: 'Hampton ', stateId: '102', cityId: 205 },
30+
{ cityName: 'Emporia', stateId: '102', cityId: 206 },
31+
{ cityName: 'Aberdeen', stateId: '103', cityId: 207 },
32+
{ cityName: 'Colville ', stateId: '103', cityId: 208 },
33+
{ cityName: 'Pasco', stateId: '103', cityId: 209 },
34+
{ cityName: 'Townsville', stateId: '104', cityId: 210 },
35+
{ cityName: 'Brisbane ', stateId: '104', cityId: 211 },
36+
{ cityName: 'Cairns', stateId: '104', cityId: 212 },
37+
{ cityName: 'Hobart', stateId: '105', cityId: 213 },
38+
{ cityName: 'Launceston ', stateId: '105', cityId: 214 },
39+
{ cityName: 'Devonport', stateId: '105', cityId: 215 },
40+
{ cityName: 'Melbourne', stateId: '106', cityId: 216 },
41+
{ cityName: 'Healesville ', stateId: '106', cityId: 217 },
42+
{ cityName: 'Geelong', stateId: '106', cityId: 218 }
43+
];
44+
public countryFields: Object = { value: 'countryId', text: 'countryName' };
45+
public stateFields: Object = { value: 'stateId', text: 'stateName' };
46+
public cityFields: Object = { text: 'cityName', value: 'cityId' };
47+
public countryWaterMark: string = 'Select a country';
48+
public stateWaterMark: string = 'Select a state';
49+
public cityWaterMark: string = 'Select a city';
50+
@ViewChild('countryList')
51+
public countryObj: DropDownListComponent;
52+
@ViewChild('stateList')
53+
public stateObj: DropDownListComponent;
54+
@ViewChild('cityList')
55+
public cityObj: DropDownListComponent;
56+
public onChange1(): void {
57+
this.stateObj.enabled = true;
58+
let tempQuery: Query = new Query().where('countryId', 'equal', this.countryObj.value);
59+
this.stateObj.query = tempQuery;
60+
this.stateObj.text = null;
61+
this.stateObj.dataBind();
62+
this.cityObj.text = null;
63+
this.cityObj.enabled = false;
64+
this.cityObj.dataBind();
65+
}
66+
public onChange2(): void {
67+
this.cityObj.enabled = true;
68+
let tempQuery1: Query = new Query().where('stateId', 'equal', this.stateObj.value);
69+
this.cityObj.query = tempQuery1;
70+
this.cityObj.text = null;
71+
this.cityObj.dataBind();
72+
}
73+
}

‎src/dropdownlist/cascading.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="control-section">
2+
<div class='control-wrapper' style='width: 250px; margin: 0 auto'>
3+
<div style='padding-top: 35px;'>
4+
<ej-dropdownlist #countryList id='countryList' [dataSource]='country' [fields]='countryFields' (change)='onChange1()' [placeholder]='countryWaterMark'></ej-dropdownlist>
5+
</div>
6+
<div style='padding-top: 35px;'>
7+
<ej-dropdownlist #stateList id='stateList' [dataSource]='state' [fields]='stateFields' (change)='onChange2()' [placeholder]='stateWaterMark' [enabled]='false'></ej-dropdownlist>
8+
</div>
9+
<div style='padding-top: 35px;'>
10+
<ej-dropdownlist #cityList id='cityList' [dataSource]='cities' [fields]='cityFields' [placeholder]='cityWaterMark' [enabled]='false'></ej-dropdownlist>
11+
</div>
12+
</div>
13+
</div>
14+
<div id="description">
15+
<p>The <code>Cascading</code> DropDownList is a series of dependent DropDownList components, in which data of one DropDownList will load based on its parent DropDownList selected value. This can achieved by using <code>change</code> event of parent DropDownList.</p>
16+
<p>In this sample, if a country is selected from countries DropDownList, then respective states will load in second DropDownList and the same has done between states and cities DropDownList.</p>
17+
</div>

‎src/dropdownlist/databinding.component.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Component, ViewEncapsulation } from '@angular/core';
2+
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
3+
@Component({
4+
selector: 'control-content',
5+
templateUrl: 'databinding.html',
6+
styleUrls: ['databinding.css'],
7+
encapsulation: ViewEncapsulation.None
8+
})
9+
export class DataBindingDropDownListComponent {
10+
public sportsData: Object[] = [
11+
{ id: 'Game1', game: 'American Football' },
12+
{ id: 'Game2', game: 'Badminton' },
13+
{ id: 'Game3', game: 'Basketball' },
14+
{ id: 'Game4', game: 'Cricket' },
15+
{ id: 'Game5', game: 'Football' },
16+
{ id: 'Game6', game: 'Golf' },
17+
{ id: 'Game7', game: 'Hockey' },
18+
{ id: 'Game8', game: 'Rugby' },
19+
{ id: 'Game9', game: 'Snooker' },
20+
{ id: 'Game10', game: 'Tennis' }
21+
];
22+
public localFields: Object = { text: 'game', value: 'id' };
23+
public localWaterMark: string = 'Select a game';
24+
public data: DataManager = new DataManager({
25+
url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',
26+
adaptor: new ODataV4Adaptor,
27+
crossDomain: true
28+
});
29+
public query: Query = new Query().select(['ContactName', 'CustomerID']);
30+
public remoteFields: Object = { text: 'ContactName', value: 'CustomerID' };
31+
public height: string = '200px';
32+
public remoteWaterMark: string = 'Select a customer';
33+
public onActionBegin(): void {
34+
let element: HTMLElement[] = <HTMLElement[] & NodeListOf<Element>>
35+
document.querySelector('.control-section').querySelectorAll('.e-input-group-icon');
36+
element[1].classList.add('e-spinner-icon');
37+
element[1].classList.remove('e-ddl-icon', 'e-search-icon');
38+
}
39+
public onActionComplete(): void {
40+
let element: HTMLElement[] = <HTMLElement[] & NodeListOf<Element>>
41+
document.querySelector('.control-section').querySelectorAll('.e-input-group-icon');
42+
element[1].classList.add('e-ddl-icon', 'e-search-icon');
43+
element[1].classList.remove('e-spinner-icon');
44+
}
45+
public onActionFailure(): void {
46+
this.onActionComplete();
47+
}
48+
}

‎src/dropdownlist/databinding.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.property-panel-content {
2+
padding: 0 10px 10px 0;
3+
}
4+
5+
.content {
6+
width: 43%;
7+
margin: 0 auto;
8+
min-width: 185px;
9+
padding: 25px 0px;
10+
}
11+
12+
.control-label {
13+
padding: 24px 0px 0px 0px;
14+
font-size: 12px;
15+
opacity: 0.54;
16+
}
17+
18+
.control-section,
19+
.content-wrapper {
20+
min-height: 350px;
21+
}
22+
23+
.e-input-group .e-input-group-icon.e-spinner-icon {
24+
background-image: url(./styles/images/Medium-36px-spin.gif) !important;
25+
background-size: 16px 16px !important;
26+
background-repeat: no-repeat !important;
27+
background-position: center center !important;
28+
width: 16px;
29+
height: 16px;
30+
}

0 commit comments

Comments
 (0)