Getting Started

The external script dependencies of the DropDownList widget are,

And the internal script dependencies of the DropDownList widget are:

File  Description / Usage
ej.core.min.js Must be referred always before using all the JS controls.
ej.data.min.js Used to handle data operation and should be used while binding data to JS controls.
ej.dropdownlist.min.js The dropdownlist’s main file
ej.checkbox.min.js Should be referred when using checkbox functionalities in DropDownList.
ej.scroller.min.js Should be referred when using scrolling in DropDownList.
ej.draggable.min.js Should be referred when using popup resize functionality in DropDownList.

For getting started you can use the ‘ej.web.all.min.js’ file, which encapsulates all the ‘ej’ controls and frameworks in one single file.

For themes, you can use the ‘ej.web.all.min.css’ CDN link from the snippet given. To add the themes in your application, please refer this link.

Preparing HTML document

Create an HTML page and add the scripts references in the order mentioned in the following code example.

  • html
  • <!DOCTYPE html>
         <html>
         <head> 
         <link href="//cdn.syncfusion.com/14.3.0.49/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
         <script src="node_modules/core-js/client/shim.min.js"></script>
         <script src="node_modules/zone.js/dist/zone.js"></script>
         <script src="node_modules/reflect-metadata/Reflect.js"></script>
         <script src="node_modules/systemjs/dist/system.src.js"></script>
         <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
         <script src="http://cdn.syncfusion.com/14.3.0.49/js/web/ej.web.all.min.js" type="text/javascript"></script>
         <script src ="http://cdn.syncfusion.com/14.3.0.49/js/common/ej.angular2.min.js"></script>
         <script src="systemjs.config.js"></script>
         </head>
         <body>
         <ej-app>Loading...</ej-app>
         </body>
         </html>

    NOTE

    In the above code, ej.web.all.min.jsscript reference has been added for demonstration purpose. It is not recommended to use this for deployment purpose, as its file size is larger since it contains all the widgets. Instead, you can use CSG utility to generate a custom script file with the required widgets for deployment purpose.

    Creating DropDownList in Angular

    The DropDownList can be created from a HTML ‘input’ element with the HTML ‘id’ attribute and pre-defined options set to it. To create the DropDownList, you should call the ‘ejDropDownList’ jQuery plug-in function.

  • html
  • <input id="dropdown1" ej-dropdownlist [dataSource]="data" [fields]="fields" [(value)]="value"/>
  • html
  • import {Component} from '@angular/core';
    
             @Component({
               selector: 'ej-app',
               templateUrl: 'app/components/dropdown/dropdown.component.html' //give the path file for dropdownlist component html file.
              })
              export class DropDownListComponent {
                    data: Array<Object> = [];
                    fields: Object;
                    value: string;
                    constructor() {
                    this.data = [
                        {text: "ListItem 1", value: "ListItem 1" },
                        {text: "ListItem 2", value: "ListItem 2" },
                        {text: "ListItem 3", value: "ListItem 3" },
                        {text: "ListItem 4", value: "ListItem 4" },
                        {text: "ListItem 5", value: "ListItem 5" },
                
                      ];
                  this.fields = { dataSource: this.data, text: "text", value: "value" };
                  }
                }

    DropDownList

    Populating data

    The DropDownList can be bounded to both local array and remote data services .You can bind data to DropDownList through services using dataSource property

  • html
  • <input id="dropdown1" ej-dropdownlist [dataSource]="customers" [fields]="fields" [(value)]="value"/>
  • html
  • import {Component,ViewEncapsulation} from '@angular/core'; 
          
    	    @Component({
               selector: 'ej-app',
               templateUrl: 'app/app.component.html',
                
                 })
            export class AppComponent {
                   customers: Array<Object> = [];
                   fields: Object;
                   constructor() {
                   this.customers = [
                     { id: "1", text: "ALFKI" }, { id: "2", text: "ANATR" }, { id: "3", text: "ANTON" },
                     { id: "4", text: "AROUT" }, { id: "5", text: "BERGS" }, { id: "6", text: "BLAUS" }
                   ];
                 this.fields = { dataSource: this.customers, id: 'id', text: 'text', value: 'text' };
        }
           
             }

    Data

    Setting Dimensions

    DropDownList dimensions can be set using width and height API.

  • html
  • <input id="bookSelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width="300px" height="50px"/>

    Setting dimensions to Popup list

    PopupWidth and popupHeight can be used to create a fixed size popup list.

  • html
  • <input id="bookSelect" ej-dropdownlist [dataSource]="data" [fields]="fields" width="300px" height="50px" popupWidth="300px" popupHeight="200px"/>

    Setting and Getting Value

    You can select single or multiple values from DropDownList widget. To assign a value initially to the DropDownList, you can use value property.

    NOTE

    To select multiple items based on index, refer here.

  • html
  • <input id="bookSelect" ej-dropdownlist [dataSource]="data" [fields]="fields" [(value)]="value" (ejchange)="onChange($event)" width="300px" height="50px" popupWidth="300px" popupHeight="100px"/>
  • html
  • import {Component, ViewEncapsulation} from '@angular/core';
    
    	    @Component({
               selector: 'ej-app',
               templateUrl: 'app/app.component.html',
       
                       })
            export class AppComponent {
                  data: Array<Object> = [];
                    fields: Object;
                    value: string;
                    constructor() {
                    this.data = [
                        {text: "ListItem 1", value: "ListItem 1" },
                        {text: "ListItem 2", value: "ListItem 2" },
                        {text: "ListItem 3", value: "ListItem 3" },
                        {text: "ListItem 4", value: "ListItem 4" },
                        {text: "ListItem 5", value: "ListItem 5" },
                
                      ];
                  this.fields = { dataSource: this.data, text: "text", value: "value" };
                  this.value = "ListItem 1";
                  }
    			  onChange(event)
    			  {
    			   var obj = $('#dropdown1').data("ejDropDownList");
    				console.log("Selected Item's Text - " + obj.option("text"));
    				console.log("selected Item's Value - " + obj.option("value"));      
    			  }
    
                }