ejDropDownList
3 Aug 201824 minutes to read
The DropDownList control provides a list of options to choose an item from the list. It can including other HTML elements such as images, textboxes, check box, radio buttons, and so on.
Example
<input id="bookSelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width="100%" [(value)]="value" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
data: Array<Object> = [];
fields: Object;
value: string;
constructor() {
this.data = [
{ id: 'cr1', text: 'Dodge Avenger', value: 'Dodge Avenger' },
{ id: 'cr2', text: 'Chrysler 200', value: 'Chrysler 200' },
{ id: 'cr3', text: 'Ford Focus', value: 'Ford Focus' },
{ id: 'cr4', text: 'Ford Taurus', value: 'Ford Taurus' },
{ id: 'cr5', text: 'Dazzler', value: 'Dazzler' },
{ id: 'cr6', text: 'Chevy Spark', value: 'Chevy Spark' },
{ id: 'cr7', text: 'Chevy Volt', value: 'Chevy Volt' },
{ id: 'cr8', text: 'Honda Fit', value: 'Honda Fit' },
{ id: 'cr9', text: 'Honda Cross tour', value: 'Honda Cross tour' },
{ id: 'cr10', text: 'Acura RL', value: 'Acura RL' },
{ id: 'cr11', text: 'Hyundai Elantra', value: 'Hyundai Elantra' },
{ id: 'cr12', text: 'Mazda3', value: 'Mazda3' }
];
this.fields = { dataSource: this.data, text: 'text', value: 'value' };
this.value = 'Dazzler';
}
}Requires
-
module:jQuery
-
module:jQuery.easing.1.3.js
-
module:ej.core.js
-
module:ej.data.js
-
module:ej.draggable.js
-
module:ej.dropdownlist.js
-
module:ej.checkbox.js
-
module:ej.scroller.js
Members
allowVirtualScrolling boolean
The Virtual Scrolling(lazy loading) feature is used to display a large amount of data that you require without buffering the entire load of a huge database records in the DropDownList, that is, when scrolling, an AJAX request is sent to fetch some amount of data from the server dynamically. To achieve this scenario with DropDownList, set the allowVirtualScrolling to true.
Default Value
- false
Example
<input id="bookSelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width="100%" [(value)]="value" [allowVirtualScrolling]="allowVirtualScrolling"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
data: Array<Object> = [];
fields: Object;
value: string;
allowVirtualScrolling: boolean;
constructor() {
this.data = [
{ id: 'cr1', text: 'Dodge Avenger', value: 'Dodge Avenger' },
{ id: 'cr2', text: 'Chrysler 200', value: 'Chrysler 200' },
{ id: 'cr3', text: 'Ford Focus', value: 'Ford Focus' },
{ id: 'cr4', text: 'Ford Taurus', value: 'Ford Taurus' },
{ id: 'cr5', text: 'Dazzler', value: 'Dazzler' },
{ id: 'cr6', text: 'Chevy Spark', value: 'Chevy Spark' },
{ id: 'cr7', text: 'Chevy Volt', value: 'Chevy Volt' },
{ id: 'cr8', text: 'Honda Fit', value: 'Honda Fit' },
{ id: 'cr9', text: 'Honda Cross tour', value: 'Honda Cross tour' },
{ id: 'cr10', text: 'Acura RL', value: 'Acura RL' },
{ id: 'cr11', text: 'Hyundai Elantra', value: 'Hyundai Elantra' },
{ id: 'cr12', text: 'Mazda3', value: 'Mazda3' }
];
this.fields = { dataSource: this.data, text: 'text', value: 'value' };
this.value = 'Dazzler';
this.allowVirtualScrolling = true;
}
}cascadeTo string
The cascading DropDownLists is a series of two or more DropDownLists in which each DropDownList is filtered according to the previous DropDownList’s value.
Default Value
- null
Example
<input id="countrySelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="50%" [enabled]="enabled"/>
<input id="groupSelect" ej-dropdownlist [dataSource]="groups" [fields]="group" width="50%" cascadeTo="countrySelect"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './cascadeTo.component.html'
})
export class cascadeToComponent {
countries: Array<Object> = [];
groups: Array<Object> = [];
group: Object;
fields: Object;
enabled: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.groups = [
{ parentId: 'a', text: "Group A" },
{ parentId: 'b', text: "Group B" },
{ parentId: 'c', text: "Group C" },
{ parentId: 'd', text: "Group D" },
{ parentId: 'e', text: "Group E" }
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
this.group={ dataSource: this.groups, text: 'text', value: 'parentId'};
this.enabled= false;
}
}caseSensitiveSearch boolean
Sets the case sensitivity of the search operation. It supports both enableFilterSearch and enableIncrementalSearch property.
Default Value
- false
Example
cssClass string
Dropdown widget’s style and appearance can be controlled based on 13 different default built-in themes.
You can customize the appearance of the dropdown by using the cssClass property. You need to specify a class name in the cssClass property and the same class name is used before the class definitions wherever the custom styles are applied.
Default Value
- ””
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" cssClass="customCss"/>import {Component} from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
styleUrls: ['./Dropdownlist.component.css'],
encapsulation: ViewEncapsulation.None
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
customCss: string;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
this.customCss = "customCss";
}
}dataSource object
This property is used to serve data from the data services based on the query provided. To bind the data to the dropdown widget, the dataSource property is assigned with the instance of the ej.DataManager.
Default Value
- null
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="dataManager" [fields]="fields" width="100%" [(value)]="value"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
dataManager: Object;
constructor() {
this.fields = { text: 'Country' };
this.dataManager = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Customers");
}
}delimiterChar string
Sets the separator when the multiSelectMode with delimiter option or checkbox is enabled with the dropdown. When you enter the delimiter value, the texts after the delimiter are considered as a separate word or query. The delimiter string is a single character and must be a symbol. Mostly, the delimiter symbol is used as comma (,) or semi-colon (;) or any other special character.
Default Value
- ’,’
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" delimiterChar= ";" multiSelectMode= "delimiter"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries };
}
}enableAnimation boolean
The enabled Animation property uses the easeOutQuad animation to SlideDown and SlideUp the Popup list in 200 and 100 milliseconds, respectively.
Default Value
- false
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" [enableAnimation]="enableAnimation"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
enableAnimation: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
this.enableAnimation = true;
}
}enabled boolean
This property is used to indicate whether the DropDownList control responds to the user interaction or not. By default, the control is in the enabled mode and you can disable it by setting it to false.
Default Value
- true
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" [enabled]="enable"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
enabled: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries };
this.enabled = true;
}
}enableIncrementalSearch boolean
Specifies to perform incremental search for the selection of items from the DropDownList with the help of this property. This helps in selecting the item by using the typed character.
Default Value
- true
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" [enableIncrementalSearch]="enableIncrementalSearch"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
enableIncrementalSearch: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries };
this.enableIncrementalSearch = true;
}
}enableFilterSearch boolean
This property selects the item in the DropDownList when the item is entered in the Search textbox.
Default Value
- false
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" [enableFilterSearch]="enableFilterSearch"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
enableFilterSearch: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries };
this.enableFilterSearch = true;
}
}enableServerFiltering boolean
The Server filtering is to perform filter action when text is typed in the search box and filtering will be done based on the collection which contains the matched item from entire datasource. Server filtering will be done based on the entire items in DataSource.
Default Value
- false
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width="100%" [(value)]="value" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" enableServerFiltering="enableServerFiltering" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
data: Object;
enableFilterSearch: boolean;
enableServerFiltering: boolean;
itemsCount: int;
constructor() {
this.fields = { text: 'CompanyName', value: 'ContactName'};
this.data = ej.DataManager({ url: "http://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Customers/" });
this.itemsCount= 10;
this.enableFilterSearch= true;
this.enableServerFiltering= true;
}
}enablePersistence boolean
Saves the current model value to the browser cookies for state maintenance. While refreshing the DropDownList control page, it retains the model value and it is applied from the browser cookies.
Default Value
- false
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" [enablePersistence]="enablePersistence"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
enablePersistence: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
];
this.fields = { dataSource: this.countries };
this.enablePersistence = true;
}
}enablePopupResize boolean
This enables the resize handler to resize the popup to any size.
Default Value
- false
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" [enablePopupResize]="enablePopupResize"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
enablePopupResize: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries };
this.enablePopupResize = true;
}
}enableRTL boolean
Sets the DropDownList textbox direction from right to left align.
Default Value
- false
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" [enableRTL]="enableRTL"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
enableRTL: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries };
this.enableRTL = true;
}
}enableSorting boolean
This property is used to sort the Items in the DropDownList. By default, it sorts the items in an ascending order.
Default Value
- false
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" [enableSorting]="enableSorting"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
enableSorting: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "India"},
{ value: 12, parentId: 'a', text: "Ukraine"},
{ value: 13, parentId: 'a', text: "Romania"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Poland"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "Algeria"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Egypt"},
{ value: 23, parentId: 'e', text: "New Zealand"},
{ value: 24, parentId: 'e', text: "Thailand"},
{ value: 25, parentId: 'e', text: "Singapore"},
{ value: 26, parentId: 'e', text: "Finland"}
];
this.fields = { dataSource: this.countries };
this.enableSorting = true;
}
}fields object
Specifies the mapping fields for the data items of the DropDownList.
Default Value
- null
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ text: "Algeria", flag: "flag-dz" },
{ text: "Argentina", flag: "flag" },
{ text: "Armenia", flag: "flag-am" },
{ text: "Brazil", flag: "flag-br" }
];
this.fields = { text: "text", value: "flag" };
}
}fields.groupBy string
Used to group the items.
fields.htmlAttributes object
Defines the HTML attributes such as ID, class, and styles for the item.
fields.id string
Defines the ID for the tag.
fields.imageAttributes string
Defines the image attributes such as height, width, styles, and so on.
fields.imageUrl string
Defines the imageURL for the image location.
fields.selected boolean
Defines the tag value to be selected initially.
fields.spriteCssClass string
Defines the sprite CSS for the image tag.
fields.tableName string
Defines the table name for tag value or display text while rendering remote data.
fields.text string
Defines the text content for the tag.
fields.value string
Defines the tag value.
filterType enum
When the enableFilterSearch property value is set to true, the values in the DropDownList shows the items starting with or containing the key word/letter typed in the Search textbox.
| Name | Description |
|---|---|
| contains | filter the data wherever contains search key |
| startsWith | filter the data based on search key present at start position |
Default Value
- ej.FilterType.Contains
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="list" [fields]="fields" width="100%" [(value)]="value" enableFilterSearch=true filterType="Contains"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
list: Array<Object> = [];
fields: Object;
constructor() {
this.list = [
{ text: "Architecture", id:"Architecture" },
{ text: "Biographies", id:"Biographies" },
{ text: "Business", id:"Business" },
{ text: "ComputerIT", id:"ComputerIT" },
{ text: "Comics", id:"Comics" },
{ text: "Cookery", id:"Cookery" },
{ text: "Fiction", id:"Fiction" },
{ text: "Health", id:"Health" },
{ text: "Humanities", id:"Humanities" },
{ text: "Language", id:"Language" }
];
this.fields = { text: "text", value: "id" };
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="list" [fields]="fields" width="100%" [(value)]="value" enableFilterSearch=true filterType="StartsWith"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
list: Array<Object> = [];
fields: Object;
constructor() {
this.list = [
{ text: "Architecture", id:"Architecture" },
{ text: "Biographies", id:"Biographies" },
{ text: "Business", id:"Business" },
{ text: "ComputerIT", id:"ComputerIT" },
{ text: "Comics", id:"Comics" },
{ text: "Cookery", id:"Cookery" },
{ text: "Fiction", id:"Fiction" },
{ text: "Health", id:"Health" },
{ text: "Humanities", id:"Humanities" },
{ text: "Language", id:"Language" }
];
this.fields = { text: "text", value: "id" };
}
}headerTemplate string
Used to create visualized header for dropdown items
Default Value
- null
Example
<input type="text" id="dropdown1" ej-dropdownlist [dataSource]="List" [width]="width" [headerTemplate]="header" [template]="template">import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: 'app/components/dropdown/dropdown.component.html',
styleUrls: ['app/components/dropdown/dropdown.component.css'],
encapsulation: ViewEncapsulation.None
})
export class DropDownListComponent {
List: Array<Object>;
header: string;
template: string;
width: any;
constructor() {
this.List = [{
text: "Erik Linden",
imgId: "3",
role: "Representative",
country: "England"
}, {
text: "John Linden",
imgId: "6",
role: "Representative",
country: "Norway"
}, {
text: "Louis",
imgId: "7",
role: "Representative",
country: "Australia"
}, {
text: "Lawrence",
imgId: "8",
role: "Representative",
country: "India"
}];
this.header = "<div class='header'><span>PHOTO</span> <span>DETAILS</span></div>";
this.template = '<div><img class="imgId" src="Employee/${imgId}.png" alt="employee"/>' + '<div class="ename"> ${text} </div><div class="role"> ${role} </div><div class="cont"> ${country} </div></div>';
this.width = "200";
}
}Add the below css in dropdown.component.css file.
.imgId {
margin: 0;
padding: 3px 10px 3px 3px;
border: 0 none;
width: 60px;
height: 60px;
float: left;
}
.header {
font-weight: bold;
border-bottom: 1px solid #c8c8c8;
background: #c8c8c8;
}
.header > span {
display: inline-block;
padding: 10px;
}
.ename {
font-weight: bold;
padding: 6px 3px 1px 3px;
}
.role, .cont {
font-size: smaller;
padding: 3px 3px -1px 0px;
}height string|number
Defines the height of the DropDownList textbox.
Default Value
- null
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" height=100/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries };
}
}htmlAttributes object
It sets the given HTML attributes for the DropDownList control such as ID, name, disabled, etc.
Default Value
- null
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" [htmlAttributes]="htmlAttributes"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
htmlAttributes: any;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries };
this.htmlAttributes = { disabled: "disabled"};
}
}itemsCount number
Data can be fetched in the DropDownList control by using the DataSource, specifying the number of items.
Default Value
- 5
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width="100%" [(value)]="value" [itemsCount] = "itemsCount"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
itemsCount: int;
data: Object;
constructor() {
this.fields = { text: "CompanyName" };
this.data = ej.DataManager({ url: "http://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Customers/" });
this.itemsCount = 3;
}
}locale string
Allows the user to set the particular country or region language for the DropDownList.
Default Value
- “en-US”
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width="100%" [(value)]="value" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" enableServerFiltering="enableServerFiltering" [locale]= "locale" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
enableServerFiltering: boolean;
itemsCount: int;
locale: string;
constructor() {
this.fields = { text: 'CompanyName', value: 'ContactName'};
this.data = ej.DataManager({ url: "http://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Customers/" });
this.itemsCount= 10;
this.enableFilterSearch= true;
this.enableServerFiltering= true;
this.locale="de-DE";
}
}maxPopupHeight string|number
Defines the maximum height of the suggestion box. This property restricts the maximum height of the popup when resize is enabled.
Default Value
- null
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=360 [(value)]="value"
enablePopupResize = true maxPopupHeight = "200px"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
}
}minPopupHeight string|number
Defines the minimum height of the suggestion box. This property restricts the minimum height of the popup when resize is enabled.
Default Value
- null
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" enableServerFiltering="enableServerFiltering" enablePopupResize=true minPopupHeight= "150px" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
data: Object;
enableFilterSearch: boolean;
enableServerFiltering: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
this.enableServerFiltering= true;
}
}maxPopupWidth string|number
Defines the maximum width of the suggestion box. This property restricts the maximum width of the popup when resize is enabled.
Default Value
- null
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" enableServerFiltering="enableServerFiltering" enablePopupResize=true maxPopupWidth= "500px" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
data: Object;
enableFilterSearch: boolean;
enableServerFiltering: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
this.enableServerFiltering= true;
}
}minPopupWidth string|number
Defines the minimum height of the suggestion box. This property restricts the minimum height of the popup when resize is enabled.
Default Value
- 0
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" enableServerFiltering="enableServerFiltering" enablePopupResize=true minPopupWidth= "150px" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
data: Object;
enableFilterSearch: boolean;
enableServerFiltering: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
this.enableServerFiltering= true;
}
}multiSelectMode enum
With the help of this property, you can make a single or multi selection with the DropDownList and display the text in two modes, delimiter and visual mode. In delimiter mode, you can separate the items by using the delimiter character such as comma (,) or semi-colon (;) or any other special character. In the visual mode, the items are showcased like boxes with close icon in the textbox.
| Name | Description |
|---|---|
| none | can select only single item in DropDownList |
| delimiter | can select multiple items and it's separated by delimiterChar |
| visualMode | can select multiple items and it's show's like visual box in textbox |
Default Value
- ej.MultiSelectMode.None
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" multiSelectMode="VisualMode"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" multiSelectMode="VisualMode"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
}
}popupHeight string|number
Defines the height of the suggestion popup box in the DropDownList control.
Default Value
- “152px”
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" popupHeight="190px"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
}
}popupWidth string|number
Defines the width of the suggestion popup box in the DropDownList control.
Default Value
- “auto”
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" popupWidth=200 />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
}
}query object
Specifies the query to retrieve the data from the DataSource.
Default Value
- null
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
}readOnly boolean
Specifies that the DropDownList textbox values should be read-only.
Default Value
- false
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=360 [(value)]="value" [readOnly]="readOnly"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
readOnly: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
this.readOnly = true;
}
}selectedIndex number
Specifies an item to be selected in the DropDownList.
Default Value
- null
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="100%" [(value)]="value" selectedIndex=2 />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
}
}selectedIndices array
Specifies the selectedItems for the DropDownList.
Default Value
- []
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=360 [(value)]="value" multiSelectMode="Delimiter" showCheckbox=true [selectedIndices]="selectedIndices" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
selectedIndices: array;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
this.selectedIndices = [0,1,3];
}
}showCheckbox boolean
Selects multiple items in the DropDownList with the help of the checkbox control. To achieve this, enable the showCheckbox option to true.
Default Value
- false
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=360 [(value)]="value" multiSelectMode="Delimiter" showCheckbox=true />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
}
}showPopupOnLoad boolean
DropDownList control is displayed with the popup seen.
Default Value
- false
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=360 [(value)]="value" multiSelectMode="Delimiter" [showPopupOnLoad]="showPopupOnLoad" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
showPopupOnLoad: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
this.showPopupOnLoad = true;
}
}showRoundedCorner boolean
DropDownList textbox displayed with the rounded corner style.
Default Value
- false
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=360 [(value)]="value" multiSelectMode="Delimiter" [showRoundedCorner]="showRoundedCorner" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
showRoundedCorner: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
this.showRoundedCorner = true;
}
}sortOrder enum
When the enableSorting property value is set to true, this property helps to sort the items either in ascending or descending order
| Name | Description |
|---|---|
| Ascending | Sort the data in ascending order |
| Descending | Sort the data in descending order |
Default Value
- ej.SortOrder.Ascending
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=360 [(value)]="value" multiSelectMode="Delimiter" [enableSorting]="enableSorting" sortOrder="Descending" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
enableSorting: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
this.enableSorting = true;
}
}targetID string
Specifies the targetID for the DropDownList’s items.
Default Value
- null
Example
<input id="List" ej-dropdownlist [targetID]="list" />
<div id="tools">
<ul>
<li><div class="mailtools categorize"></div>Categorize and Move</li>
<li><div class="mailtools done"></div>Done</li>
<li><div class="mailtools flag"></div>Flag & Move</li>
<li><div class="mailtools forward"></div>Forward</li>
<li><div class="mailtools movetofolder"></div>Move to Folder</li>
<li><div class="mailtools newmail"></div>New E-mail</li>
<li><div class="mailtools meeting"></div>New Meeting</li>
<li><div class="mailtools reply"></div>Reply & Delete</li>
</ul>
</div>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
list: string;
constructor() {
this.list = "tools";
}
}template string
By default, you can add any text or image to the DropDownList item. To customize the item layout or to create your own visualized elements, you can use this template support.
Default Value
- null
Example
<input type="text" id="dropdown1" ej-dropdownlist [dataSource]="List" [width]="width" [headerTemplate]="header" [template]="template">import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: 'app/components/dropdown/dropdown.component.html',
styleUrls: ['app/components/dropdown/dropdown.component.css'],
encapsulation: ViewEncapsulation.None
})
export class DropDownListComponent {
List: Array<Object>;
header: string;
template: string;
width: any;
constructor() {
this.List = [{
text: "Erik Linden",
imgId: "3",
role: "Representative",
country: "England"
}, {
text: "John Linden",
imgId: "6",
role: "Representative",
country: "Norway"
}, {
text: "Louis",
imgId: "7",
role: "Representative",
country: "Australia"
}, {
text: "Lawrence",
imgId: "8",
role: "Representative",
country: "India"
}];
this.header = "<div class='header'><span>PHOTO</span> <span>DETAILS</span></div>";
this.template = '<div><img class="imgId" src="Employee/${imgId}.png" alt="employee"/>' + '<div class="ename"> ${text} </div><div class="role"> ${role} </div><div class="cont"> ${country} </div></div>';
this.width = "200";
}
}Add the below css in dropdown.component.css file.
.imgId {
margin: 0;
padding: 3px 10px 3px 3px;
border: 0 none;
width: 60px;
height: 60px;
float: left;
}
.header {
font-weight: bold;
border-bottom: 1px solid #c8c8c8;
background: #c8c8c8;
}
.header > span {
display: inline-block;
padding: 10px;
}
.ename {
font-weight: bold;
padding: 6px 3px 1px 3px;
}
.role, .cont {
font-size: smaller;
padding: 3px 3px -1px 0px;
}text string
Defines the text value that is displayed in the DropDownList textbox.
For the single selection mode, the selected item’s text will be returned in its data type. In case of MultiSelectMode, returns the selected item’s texts and separated by delimiterChar in string type.
Default Value
- null
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=360 [(value)]="value" multiSelectMode="Delimiter" [text]="text" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
text: string;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
this.text = "Norway";
}
}validationMessage object
Sets the jQuery validation error message in the DropDownList
Default Value
- null
Example
<form id="form1">
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" enableServerFiltering="enableServerFiltering" enablePopupResize=true minPopupWidth= "150px" />
<div><br/>
<input type="submit" value="Validate">
</div>
</form>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
data: Object;
enableFilterSearch: boolean;
enableServerFiltering: boolean;
itemsCount: int;
query: any;
validRule: any;
validMessage: any;
constructor() {
$.validator.setDefaults({
ignore: [],// To include hidden input validation.
errorClass: 'e-validation-error', // to get the error message on jquery validation
errorPlacement: function (error, element) {
$(error).insertAfter(element.closest(".e-widget"));
}
});
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
this.enableServerFiltering= true;
this.validRule={
required: true,
};
this.validMessage={
required: "Required DDL value",
};
}
}validationRules object
Sets the jQuery validation rules in the Dropdownlist.
Default Value
- null
Example
<form id="form1">
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" enableServerFiltering="enableServerFiltering" enablePopupResize=true minPopupWidth= "150px" />
<div><br/>
<input type="submit" value="Validate">
</div>
</form>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
data: Object;
enableFilterSearch: boolean;
enableServerFiltering: boolean;
itemsCount: int;
query: any;
validRule: any;
validMessage: any;
constructor() {
$.validator.setDefaults({
ignore: [],// To include hidden input validation.
errorClass: 'e-validation-error', // to get the error message on jquery validation
errorPlacement: function (error, element) {
$(error).insertAfter(element.closest(".e-widget"));
}
});
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
this.enableServerFiltering= true;
this.validRule={
required: true,
};
this.validMessage={
required: "Required DDL value",
};
}
}value string|number
Specifies the value (text content) for the DropDownList control.
For the single selection mode, the selected item’s value will be returned in its data type. In case of MultiSelectMode, returns the selected item’s values and separated by delimiterChar in string type.
Default Value
- null
Example
<input id="List" ej-dropdownlist [targetID]="list" [value]="value" />
<div id="tools">
<ul>
<li><div class="mailtools categorize"></div>Categorize and Move</li>
<li><div class="mailtools done"></div>Done</li>
<li><div class="mailtools flag"></div>Flag & Move</li>
<li><div class="mailtools forward"></div>Forward</li>
<li><div class="mailtools movetofolder"></div>Move to Folder</li>
<li><div class="mailtools newmail"></div>New E-mail</li>
<li><div class="mailtools meeting"></div>New Meeting</li>
<li><div class="mailtools reply"></div>Reply & Delete</li>
</ul>
</div>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
list: string;
value: string;
constructor() {
this.list = "tools";
this.value = "Reply & Delete";
}
}watermarkText string
Specifies a short hint that describes the expected value of the DropDownList control.
Default Value
- null
Example
<input id="List" ej-dropdownlist [targetID]="list" watermarkText="Select" />
<div id="tools">
<ul>
<li><div class="mailtools categorize"></div>Categorize and Move</li>
<li><div class="mailtools done"></div>Done</li>
<li><div class="mailtools flag"></div>Flag & Move</li>
<li><div class="mailtools forward"></div>Forward</li>
<li><div class="mailtools movetofolder"></div>Move to Folder</li>
<li><div class="mailtools newmail"></div>New E-mail</li>
<li><div class="mailtools meeting"></div>New Meeting</li>
<li><div class="mailtools reply"></div>Reply & Delete</li>
</ul>
</div>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
list: string;
constructor() {
this.list = "tools";
}
}width string|number
Defines the width of the DropDownList textbox.
Default Value
- null
Example
<input id="List" ej-dropdownlist [targetID]="list" watermarkText="Select" width=500 />
<div id="tools">
<ul>
<li><div class="mailtools categorize"></div>Categorize and Move</li>
<li><div class="mailtools done"></div>Done</li>
<li><div class="mailtools flag"></div>Flag & Move</li>
<li><div class="mailtools forward"></div>Forward</li>
<li><div class="mailtools movetofolder"></div>Move to Folder</li>
<li><div class="mailtools newmail"></div>New E-mail</li>
<li><div class="mailtools meeting"></div>New Meeting</li>
<li><div class="mailtools reply"></div>Reply & Delete</li>
</ul>
</div>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
list: string;
constructor() {
this.list = "tools";
}
}virtualScrollMode enum
The Virtual Scrolling feature is used to display a large amount of records in the DropDownList, that is, when scrolling, an AJAX request is sent to fetch some amount of data from the server dynamically. To achieve this scenario with DropDownList, set the allowVirtualScrolling to true. You can set the itemsCount property that represents the number of items to be fetched from the server on every AJAX request.
This property enables the data to load dynamically in two ways.
| Name | Description |
|---|---|
| normal | The data is loaded only to the corresponding page (display items). When scrolling some other position, it enables the load on demand with the DropDownList. |
| continuous | The data items are loaded from the remote when scroll handle reaches the end of the scrollbar like infinity scrolling. |
Default Value
- “normal”
Example - Normal mode
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" virtualScrollMode="continuous" [itemsCount]="itemsCount" [allowVirtualScrolling]="allowVirtualScrolling" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
countries: Array<Object> = [];
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
allowVirtualScrolling: boolean;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount = 40;
this.enableFilterSearch = true;
this.query = ej.Query().select("ShipName", "ShipCountry");
this.allowVirtualScrolling = true;
}
}Methods
addItem(data)
Adding a single item or an array of items into the DropDownList allows you to specify all the field attributes such as value, template, image URL, and HTML attributes for those items.Grouping and sorting will not be supported when we add items through this method.
| Name | Type | Description |
|---|---|---|
| data | object|array | this parameter should have field attributes with respect to mapped field attributes and it's corresponding values to fields |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" />
<button (click)="add()">add</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
newCountries: Array<Object> = [];
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.newCountries=[
{value: 27, parentId: 'a', text: "Iceland"},
{value: 28, parentId: 'a', text: "Malaysia"},
];
this.fields = { text: "text", value: "value" };
}
add(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.addItem(this.newCountries);
}
}checkAll()
This method is used to select all the items in the DropDownList.
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" [showCheckbox]="showCheckBox" multiSelectMode="VisualMode" />
<button (click)="CheckAll()">CheckAll</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
this.showCheckBox = true;
}
CheckAll(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.checkAll());
}
}clearText()
Clears the text in the DropDownList textbox.
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 />
<button (click)="ClearText()">ClearText</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
ClearText(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.clearText());
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 />
<button (click)="ClearText()">ClearText</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
ClearText(){
$("#countriesSelect").ejDropDownList("clearText");
}
}destroy()
Destroys the DropDownList widget.
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 />
<button (click)="Destroy()">Destroy</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
Destroy(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.destroy());
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 />
<button (click)="Destroy()">Destroy</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
Destroy(){
$("#countriesSelect").ejDropDownList("destroy");
}
}disable()
This property is used to disable the DropDownList widget.
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 />
<button (click)="Disable()">Disable</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
Disable(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.disable();
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 />
<button (click)="Disable()">Disable</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
Disable(){
$("#countriesSelect").ejDropDownList("disable");
}
}disableItemsByIndices(index)
This property disables the set of items in the DropDownList.
| Name | Type | Description |
|---|---|---|
| index | string|number|array | disable the given index list items |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" />
<button (click)="DisableItemsByIndices()">DisableItemsByIndices</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
DisableItemsByIndices(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.disableItemsByIndices("0,3,6");
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" />
<button (click)="DisableItemsByIndices()">DisableItemsByIndices</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
DisableItemsByIndices(){
$("#countriesSelect").ejDropDownList("disableItemsByIndices","0,4,1");
}
}enable()
This property enables the DropDownList control.
Example
<input id="List" ej-dropdownlist [targetID]="list" enabled=false watermarkText="Select" width=500 />
<div id="tools">
<ul>
<li><div class="mailtools categorize"></div>Categorize and Move</li>
<li><div class="mailtools done"></div>Done</li>
<li><div class="mailtools flag"></div>Flag & Move</li>
<li><div class="mailtools forward"></div>Forward</li>
<li><div class="mailtools movetofolder"></div>Move to Folder</li>
<li><div class="mailtools newmail"></div>New E-mail</li>
<li><div class="mailtools meeting"></div>New Meeting</li>
<li><div class="mailtools reply"></div>Reply & Delete</li>
</ul>
</div>
<button (click)="Enable()">Enable</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
list: string;
constructor() {
this.list = "tools";
}
Enable(){
var obj=$("#List").data("ejDropDownList");
obj.enable();
}
}<input id="List" ej-dropdownlist [targetID]="list" enabled=false watermarkText="Select" width=500 />
<div id="tools">
<ul>
<li><div class="mailtools categorize"></div>Categorize and Move</li>
<li><div class="mailtools done"></div>Done</li>
<li><div class="mailtools flag"></div>Flag & Move</li>
<li><div class="mailtools forward"></div>Forward</li>
<li><div class="mailtools movetofolder"></div>Move to Folder</li>
<li><div class="mailtools newmail"></div>New E-mail</li>
<li><div class="mailtools meeting"></div>New Meeting</li>
<li><div class="mailtools reply"></div>Reply & Delete</li>
</ul>
</div>
<button (click)="Enable()">Enable</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
list: string;
constructor() {
this.list = "tools";
}
Enable(){
$("#List").ejDropDownList("enable");
}
}enableItemsByIndices(index)
Enables an Item or set of Items that are disabled in the DropDownList
| Name | Type | Description |
|---|---|---|
| index | string|number|array | enable the given index list items if it's disabled |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" (create)="OnLoading()" />
<button (click)="EnableItemsByIndices()">EnableItemsByIndices</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
OnLoading(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.disableItemsByIndices("0,1,2");
}
EnableItemsByIndices(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.EnableItemsByIndices(0,1,2));
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" (create)="OnLoading()" />
<button (click)="EnableItemsByIndices()">EnableItemsByIndices</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
OnLoading(){
var obj=$("#dropdown1").data("ejDropDownList");
$("#countriesSelect").ejDropDownList("disableItemsByIndices","0,1,2");
}
EnableItemsByIndices(){
$("#countriesSelect").ejDropDownList("enableItemsByIndices","0,1,2");
}
}getItemDataByValue(value)
This method retrieves the items using given value.
| Name | Type | Description |
|---|---|---|
| value | string|number|object | Return the whole object of data based on given value |
####Returns: Array
This method will return the whole object corresponds to given value from datasource
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" />
<button (click)="GetItemDataByValue()">GetItemDataByValue</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
GetItemDataByValue(){
var obj=$('#countriesSelect').ejDropDownList("getItemDataByValue","INDIA");
console.log("Target ShipName - "+ obj[0].ShipName);
}
}<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" />
<button (click)="GetItemDataByValue()">GetItemDataByValue</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
GetItemDataByValue(){
var obj=$("#countriesSelect").data("ejDropDownList");
console.log("Target ShipName - "+ obj.getItemDataByValue("INDIA")[0].ShipName);
}
}getListData()
This method is used to retrieve the items that are bound with the DropDownList.
####Returns:
object
This method will return the whole data which binds with Dropdownlist control
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 />
<button (click)="GetListData()">GetListData</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
GetListData(){
var obj=$("#countriesSelect").data("ejDropDownList");
var items = obj.getListData();
for (var i=0;i< items.length; i++)
console.log("item" + i + " is " + items[i].text);
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 />
<button (click)="GetListData()">GetListData</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
GetListData(){
var items = $("#countriesSelect").ejDropDownList("getListData");
for (var i=0;i< items.length; i++)
console.log("item" + i + " is " + items[i].text);
}
}getSelectedItem()
This method is used to get the selected items in the DropDownList.
####Returns: Array
This method will return the selected item elements
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" text="Romania" />
<button (click)="GetSelectedItem()">GetSelectedItem</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
GetSelectedItem(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.getSelectedItem();
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" text="Romania" />
<button (click)="GetSelectedItem()">GetSelectedItem</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
GetSelectedItem(){
$("#countriesSelect").ejDropDownList("getSelectedItem");
}
}getSelectedValue()
This method is used to retrieve the items value that are selected in the DropDownList.
Returns: string
This method will return the selected Item value and separated by delimiterChar in multi selection mode.
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" text="Romania" />
<button (click)="GetSelectedValue()">GetSelectedValue</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
GetSelectedValue(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.getSelectedValue();
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" text="Romania" />
<button (click)="GetSelectedValue()">GetSelectedValue</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
GetSelectedValue(){
$("#countriesSelect").ejDropDownList("getSelectedValue");
}
}hidePopup()
This method hides the suggestion popup in the DropDownList.
Example
<button (click)="HidePopup()">HidePopup</button>
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" text="Romania" showPopupOnLoad=true />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
HidePopup(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.hidePopup();
}
}<button (click)="HidePopup()">HidePopup</button>
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" text="Romania" showPopupOnLoad=true />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
HidePopup(){
$("#countriesSelect").ejDropDownList("hidePopup");
}
}selectItemsByIndices(indices)
This method is used to select the list of items in the DropDownList through the Index of the items.
| Name | Type | Description |
|---|---|---|
| index | string|number|array | select the given index list items |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox"/>
<button (click)="SelectItemByIndex()">SelectItemByIndex</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.fields = { text: "text", value: "value" };
}
SelectItemByIndex(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.selectItemByIndex("0,1,2");
//selectItemByIndices for not the DropDownList text.
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox" />
<button (click)="SelectItemByIndex()">SelectItemByIndex</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.fields = { text: "text", value: "value" };
}
SelectItemByIndex(){
$("#countriesSelect").ejDropDownList("selectItemByIndex",[0,1,2]); //selectItemByIndices for not the DropDownList text.
}
}selectItemByText(text)
This method is used to select an item in the DropDownList by using the given text value.
| Name | Type | Description |
|---|---|---|
| index | string|number|array | select the list items relates to given text |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox"/>
<button (click)="SelectItemByText()">SelectItemByText</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.fields = { text: "text", value: "value" };
}
SelectItemByText(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.selectItemByText("New Zealand, Poland");
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox" />
<button (click)="SelectItemByText()">SelectItemByText</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.fields = { text: "text", value: "value" };
}
SelectItemByText(){
$("#countriesSelect").ejDropDownList("selectItemByText","New Zealand, Poland");
}
}selectItemByValue(value)
This method is used to select an item in the DropDownList by using the given value.
| Name | Type | Description |
|---|---|---|
| index | string|number|array | select the list items relates to given values |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox"/>
<button (click)="SelectItemByValue()">SelectItemByValue</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.fields = { text: "text", value: "value" };
}
SelectItemByValue(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.selectItemByValue("22,20");
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox" />
<button (click)="SelectItemByValue()">SelectItemByValue</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.fields = { text: "text", value: "value" };
}
SelectItemByValue(){
$("#countriesSelect").ejDropDownList("selectItemByValue","20,21");
}
}showPopup()
This method shows the DropDownList control with the suggestion popup.
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 />
<button (click)="ShowPopup()">ShowPopup</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
showPopup(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.showPopup();
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 />
<button (click)="ShowPopup()">ShowPopup</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
ShowPopup(){
$("#countriesSelect").ejDropDownList("showPopup");
}
}unCheckAll()
This method is used to unselect all the items in the DropDownList.
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" />
<input type="checkbox" id="tbutton" ej-togglebutton (change)="onCheckUncheckAll($event)"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
onCheckUncheckAll(event) {
var dropdownObj = $('#CompanySelect').data("ejDropDownList");
if (event.target.checked) dropdownObj.checkAll();
else dropdownObj.unCheckAll();
}
}<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" />
<input type="checkbox" id="tbutton" ej-togglebutton (change)="onCheckUncheckAll($event)"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
onCheckUncheckAll(event) {
if (event.target.checked) $('#CompanySelect').ejDropDownList("checkAll");
else $('#CompanySelect').ejDropDownList("unCheckAll");
}
}unselectItemsByIndices(indices)
This method is used to unselect the list of items in the DropDownList through Index of the items.
| Name | Type | Description |
|---|---|---|
| index | string|number|array | unselect the given index list items |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox" [selectedIndex]="selectedIndices"/>
<button (click)="UnSelectItemByIndex()">UnSelectItemByIndex</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
selectedIndices: array;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.selectedIndices=[1,2];
this.fields = { text: "text", value: "value" };
}
UnSelectItemByIndex(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.unselectItemByIndex("1,2");
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox" [selectedIndex]="selectedIndices" />
<button (click)="UnSelectItemByIndex()">UnSelectItemByIndex</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
selectedIndices: array;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.selectedIndices=[1,2];
this.fields = { text: "text", value: "value" };
}
UnSelectItemByIndex(){
$("#countriesSelect").ejDropDownList("unselectItemByIndex",[1,2]);
}
}unselectItemByText(text)
This method is used to unselect an item in the DropDownList by using the given text value.
| Name | Type | Description |
|---|---|---|
| index | string|number|array | unselect the list items relates to given text |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox" [selectedIndex]="selectedIndices"/>
<button (click)="UnSelectItemByText()">UnSelectItemByText</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
selectedIndices: array;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.selectedIndices=[1,2];
this.fields = { text: "text", value: "value" };
}
UnSelectItemByText(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.unselectItemByText("Armenia,Bangladesh");
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox" [selectedIndex]="selectedIndices" />
<button (click)="UnSelectItemByText()">UnSelectItemByText</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
selectedIndices: array;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.selectedIndices=[1,2];
this.fields = { text: "text", value: "value" };
}
UnSelectItemByText(){
$("#countriesSelect").ejDropDownList("unselectItemByText","Armenia,Bangladesh");
}
}unselectItemByValue(value)
This method is used to unselect an item in the DropDownList by using the given value.
| Name | Type | Description |
|---|---|---|
| index | string|number|array | unselect the list items relates to given values |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox" [selectedIndex]="selectedIndices"/>
<button (click)="UnSelectItemByValue()">UnSelectItemByValue</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
selectedIndices: array;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.selectedIndices=[1,2];
this.fields = { text: "text", value: "value" };
}
UnSelectItemByValue(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.unselectItemByValue("12,13");
}
}<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox" [selectedIndex]="selectedIndices" />
<button (click)="UnSelectItemByValue()">UnSelectItemByValue</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
selectedIndices: array;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.showCheckBox = true;
this.selectedIndices=[1,2];
this.fields = { text: "text", value: "value" };
}
UnSelectItemByValue(){
$("#countriesSelect").ejDropDownList("unselectItemByValue","12,13");
}
}Events
actionBegin
Fires the action before the XHR request.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" (actionBegin)="actionBeginEvent($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
actionBeginEvent(args){
/*Do your changes */
}
}actionComplete
Fires the action when the list of items is bound to the DropDownList by xhr post calling
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| count | number | Returns number of times trying to fetch the data |
| model | object | returns the DropDownList model |
| query | object | Returns the query for data retrieval |
| request | object | Returns the query for data retrieval from the Database |
| type | string | returns the name of the event |
| result | array | Returns the number of items fetched from remote data |
| xhr | object | Returns the requested data |
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" (actionComplete)="actionCompleteEvent($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
actionCompleteEvent(args){
/*Do your changes */
}
}actionFailure
Fires the action when the xhr post calling failed on remote data binding with the DropDownList control.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| error | object | Returns the error message |
| model | object | returns the DropDownList model |
| query | object | Returns the query for data retrieval |
| type | string | returns the name of the event |
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" (actionFailure)="actionFailureEvent($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
actionFailureEvent(args){
/*Do your changes */
}
}actionSuccess
Fires the action when the xhr post calling succeed on remote data binding with the DropDownList control
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| count | number | Returns number of times trying to fetch the data |
| model | object | returns the DropDownList model |
| query | object | Returns the query for data retrieval |
| request | object | Returns the query for data retrieval from the Database |
| type | string | returns the name of the event |
| result | array | Returns the number of items fetched from remote data |
| xhr | object | Returns the requested data |
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" (actionSuccess)="actionSuccessEvent($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
actionSuccessEvent(args){
/*Do your changes */
}
}beforePopupHide
Fires the action before the popup is ready to hide.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
| text | string | returns the selected text |
| value | string | returns the selected value |
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" (beforePopupHide)="BeforePopupHideEvent($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
BeforePopupHideEvent(args){
/*Do your changes */
}
}beforePopupShown
Fires the action before the popup is ready to be displayed.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
| text | string | returns the selected text |
| value | string | returns the selected value |
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" (beforePopupShown)="BeforePopupShownEvent($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
BeforePopupShownEvent(args){
/*Do your changes */
}
}cascade
Fires when the cascading happens between two DropDownList exactly after the value changes in the first dropdown and before filtering in the second Dropdown.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| cascadeModel | object | Returns the cascading dropdown model. |
| cascadeValue | string | returns the current selected value in first dropdown. |
| model | object | returns the DropDownList model |
| requiresDefaultFilter | boolean | returns the default filter action for second dropdown data should happen or not. |
| type | string | returns the name of the event |
Example
<input id="countrySelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width="50%" [enabled]="enabled"/>
<input id="groupSelect" ej-dropdownlist [dataSource]="groups" [fields]="group" width="50%" cascadeTo="countrySelect" (cascade)="cascade($event)"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './cascadeTo.component.html'
})
export class cascadeToComponent {
countries: Array<Object> = [];
groups: Array<Object> = [];
group: Object;
fields: Object;
enabled: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 18, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.groups = [
{ parentId: 'a', text: "Group A" },
{ parentId: 'b', text: "Group B" },
{ parentId: 'c', text: "Group C" },
{ parentId: 'd', text: "Group D" },
{ parentId: 'e', text: "Group E" }
];
this.fields = { dataSource: this.countries, text: 'text', value: 'value' };
this.group={ dataSource: this.groups, text: 'text', value: 'parentId'};
this.enabled= false;
}
cascade(args){
/*Do your changes */
}
}change
Fires the action when the DropDownList control’s value is changed.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| isChecked | boolean | Returns the selected item with checkbox checked or not. |
| itemId | string | Returns the selected item ID. |
| model | object | returns the DropDownList model |
| selectedText | string | Returns the selected item text. |
| type | string | returns the name of the event |
| text | string | Returns the selected text. |
| value | string | Returns the selected value. |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 (ejchange)="Change($event)"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
Change(args){
/*Do your changes */
}
}checkChange
Fires the action when the list item checkbox value is changed.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| isChecked | boolean | Returns the selected item with checkbox checked or not. |
| itemId | string | Returns the selected item ID. |
| model | object | returns the DropDownList model |
| selectedText | string | Returns the selected item text. |
| type | string | returns the name of the event |
| text | string | Returns the selected text. |
| value | string | Returns the selected value. |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 [showCheckbox]="showCheckBox" (checkChange)="CheckChange($event)"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
this.showCheckBox = true;
}
CheckChange(args){
/*Do your changes */
}
}create
Fires the action once the DropDownList is created.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 [showCheckbox]="showCheckBox" (create)="Create($event)"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
this.showCheckBox = true;
}
Create(args){
/*Do your changes */
}
}dataBound
Fires the action when the list items is bound to the DropDownList.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
| data | object | returns the data that is bound to DropDownList |
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" (dataBound)="DataBoundEvent($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
DataBoundEvent(args){
/*Do your changes */
}
}destroy
Fires the action when the DropDownList is destroyed.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | its value is set as true,if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 (destroy)="DestroyEvent($event)" />
<button (click)="Destroy()">Destroy</button>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
}
Destroy(){
var obj=$("#countriesSelect").data("ejDropDownList");
obj.destroy());
}
DestroyEvent(args){
/*Do your changes */
}
}focusIn
Fires the action when the DropDownList is focused.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | its value is set as true,if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" (focusIn)="FocusInEvent($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
FocusInEvent(args){
/*Do your changes */
}
}focusOut
Fires the action when the DropDownList is about to lose focus.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | its value is set as true,if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 [showCheckbox]="showCheckBox" (focusOut)="FocusOut($event)"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
this.showCheckBox = true;
}
FocusOut(args){
/*Do your changes */
}
}popupHide
Fires the action, once the popup is closed
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
| text | string | returns the selected text |
| value | string | returns the selected value |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 [showCheckbox]="showCheckBox" (popupHide)="popupHide($event)"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
this.showCheckBox = true;
}
popupHide(args){
/*Do your changes */
}
}popupResize
Fires the action, when the popup is resized.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
| event | object | Returns the data from the resizable plugin. |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 [showCheckbox]="showCheckBox" enablePopupResize=true (popupResize)="PopupResizeEvent($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
this.showCheckBox = true;
}
PopupResizeEvent(args){
/*Do your changes */
}
}popupShown
Fires the action, once the popup is opened.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
| text | string | returns the selected text |
| value | string | returns the selected value |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 [showCheckbox]="showCheckBox" enablePopupResize=true (popupShown)="PopupShownEvent($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
this.showCheckBox = true;
}
PopupShownEvent(args){
/*Do your changes */
}
}popupResizeStart
Fires the action, when resizing a popup starts.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
| event | object | Returns the data from the resizable plugin. |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 [showCheckbox]="showCheckBox" enablePopupResize=true (popupResizeStart)="PopupResizeStart($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
this.showCheckBox = true;
}
PopupResizeStart(args){
/*Do your changes */
}
}popupResizeStop
Fires the action, when the popup resizing is stopped.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model | object | returns the DropDownList model |
| type | string | returns the name of the event |
| event | object | Returns the data from the resizable plugin. |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" selectedIndex=0 [showCheckbox]="showCheckBox" enablePopupResize=true (popupResizeStop)="PopupResizeStop($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
this.showCheckBox = true;
}
PopupResizeStop(args){
/*Do your changes */
}
}search
Fires the action before filtering the list items that starts in the DropDownList when the enableFilterSearch is enabled.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| items | object | Returns the data bound to the DropDownList. |
| model | object | returns the DropDownList model |
| selectedText | string | Returns the selected item text. |
| type | string | returns the name of the event |
| searchString | string | Returns the search string typed in search box. |
Example
<input id="CompanySelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width=340 [(value)]="value" [query]="query" [enableFilterSearch]="enableFilterSearch" [itemsCount]="itemsCount" (search)="SearchEvent($event)" />import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './Dropdownlist.component.html'
})
export class DropdownlistComponent {
fields: Object;
data: Object;
enableFilterSearch: boolean;
itemsCount: int;
query: any;
constructor() {
this.fields = { text: "ShipName", groupBy: "ShipCountry"};
this.data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" });
this.itemsCount= 20;
this.enableFilterSearch= true;
this.query = ej.Query().select("ShipName", "ShipCountry");
}
SearchEvent(args){
/*Do your changes */
}
}select
Fires the action, when the list of item is selected.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| isChecked | boolean | Returns the selected item with checkbox checked or not. |
| itemId | string | Returns the selected item ID. |
| model | object | returns the DropDownList model |
| selectedText | string | Returns the selected item text. |
| type | string | returns the name of the event |
| text | string | Returns the selected text. |
| value | string | Returns the selected value. |
Example
<input id="countriesSelect" ej-dropdownlist [dataSource]="countries" [fields]="fields" width=340 [(value)]="value" multiSelectMode="VisualMode" [showCheckbox]="showCheckBox" (select)="Select($event)"/>import {Component} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './DropDownList.component.html'
})
export class DropDownListComponent {
countries: Array<Object> = [];
fields: Object;
showCheckBox: boolean;
constructor() {
this.countries = [
{ value: 11, parentId: 'a', text: "Algeria"},
{ value: 12, parentId: 'a', text: "Armenia"},
{ value: 13, parentId: 'a', text: "Bangladesh"},
{ value: 14, parentId: 'a', text: "Cuba"},
{ value: 15, parentId: 'b', text: "Denmark"},
{ value: 16, parentId: 'b', text: "Egypt"},
{ value: 17, parentId: 'c', text: "Finland"},
{ value: 10, parentId: 'c', text: "India"},
{ value: 19, parentId: 'c', text: "Malaysia"},
{ value: 20, parentId: 'd', text: "New Zealand"},
{ value: 21, parentId: 'd', text: "Norway"},
{ value: 22, parentId: 'd', text: "Poland"},
{ value: 23, parentId: 'e', text: "Romania"},
{ value: 24, parentId: 'e', text: "Singapore"},
{ value: 25, parentId: 'e', text: "Thailand"},
{ value: 26, parentId: 'e', text: "Ukraine"}
];
this.fields = { text: "text", value: "value" };
this.showCheckBox = true;
}
Select(args){
/*Do your changes */
}
}