Getting Started
3 Dec 201813 minutes to read
The external script dependencies of the DropDownList widget are,
- jQuery 1.7.1 and later versions.
- jQuery.easing - to support the animation effects.
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 a new HTML file and add CDN links to the JavaScript and CSS dependencies to your project.
<!DOCTYPE html>
<html ng-app="dropdownlistApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
<!-- Style sheet for default theme (flat azure) -->
<link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<!--Scripts-->
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>
<script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
<script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
<script src="http://cdn.syncfusion.com/24.2.3/js/common/ej.widget.angular.min.js"></script>
<!--Add custom scripts here -->
</head>
<body ng-controller="dropdownlistCtrl">
<!-- add necessary HTML elements here -->
</body>
</html>The ng-app directive explains the root element (<html> or <body> tags) of the application. You will assign a name to the ng-app directive, then you must create a module with that name. In this module, you have to define your directives, services, filters and configurations.
A controller is defined using ng-controller directive. Each controller accepts an object $scope which we pass as a parameter. This object is used to bind the controller with view.
Properties can be bind to ejDropDownList control using the prefix e- and particular property name.
NOTE
In production, we highly recommend you to use our custom script generator to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use GZip compression in your server.
Creating DropDownList in AngularJS
The DropDownList can be created from a HTML ‘select’ element with the HTML ‘id’ attribute and pre-defined options set to it. Use the below given code to create a DropDownList in AngularJS.
<select id="dropdown1" ej-dropdownlist e-datasource="dataList" e-value="value"></select>var list = [
{ id: "cr1", text: "ListItem 1", value: "ListItem 1" },
{ id: "cr2", text: "ListItem 2", value: "ListItem 2" },
{ id: "cr3", text: "ListItem 3", value: "ListItem 3" },
{ id: "cr4", text: "ListItem 4", value: "ListItem 4" },
{ id: "cr5", text: "ListItem 5", value: "ListItem 5" },
];
angular.module('dropdownlistApp', ['ejangular']).controller('dropdownlistCtrl', function ($scope) {
$scope.dataList = list;
});
Populating data
The DropDownList can be bounded to both local array and remote data services using ej.DataManager. You can use DataManager component to serve data from the data services based on the query provided. To bind data to DropDownList widget, the dataSource property should be assigned with the instance of ‘ej.DataManager’.
NOTE
ODataAdaptor is the default adaptor for DataManager. On binding to other web services, proper data adaptor needs to be set on ‘adaptor’ option of DataManager.
<select id="dropdown1" ej-dropdownlist e-datasource="dataList" e-fields-text="text"></select><script>
var 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" }
];
var dataManager = ej.DataManager(Customers);
angular.module('dropdownlistApp', ['ejangular']).controller('dropdownlistCtrl', function ($scope) {
$scope.dataList = dataManager;
});
</script>
Setting Dimensions
DropDownList dimensions can be set using width and height API.
<select id="dropdown1" ej-dropdownlist e-datasource="dataList" e-value="value" e-width="width" e-height="height"></select><script>
var list = [
{ id: "cr1", text: "ListItem 1", value: "ListItem 1" },
{ id: "cr2", text: "ListItem 2", value: "ListItem 2" },
{ id: "cr3", text: "ListItem 3", value: "ListItem 3" },
{ id: "cr4", text: "ListItem 4", value: "ListItem 4" },
{ id: "cr5", text: "ListItem 5", value: "ListItem 5" },
];
angular.module('dropdownlistApp', ['ejangular']).controller('dropdownlistCtrl', function ($scope) {
$scope.dataList = list;
$scope.width="300px";
$scope.height="40px"
});
</script>Setting dimensions to Popup list
PopupWidth and popupHeight can be used to create a fixed size popup list.
<select id="dropdown1" ej-dropdownlist e-datasource="dataList" e-value="value" e-popupHeight="height" e-popupWidth="width"></select><script>
var list = [
{ id: "cr1", text: "ListItem 1", value: "ListItem 1" },
{ id: "cr2", text: "ListItem 2", value: "ListItem 2" },
{ id: "cr3", text: "ListItem 3", value: "ListItem 3" },
{ id: "cr4", text: "ListItem 4", value: "ListItem 4" },
{ id: "cr5", text: "ListItem 5", value: "ListItem 5" },
];
angular.module('dropdownlistApp', ['ejangular']).controller('dropdownlistCtrl', function ($scope) {
$scope.dataList = list;
$scope.width="200px";
$scope.height="100px"
});
</script>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.
<select id="dropdown1" ej-dropdownlist e-datasource="dataList" e-value="value" e-change="change"></select><script>
var list = [
{ id: "cr1", text: "ListItem 1", value: "ListItem 1" },
{ id: "cr2", text: "ListItem 2", value: "ListItem 2" },
{ id: "cr3", text: "ListItem 3", value: "ListItem 3" },
{ id: "cr4", text: "ListItem 4", value: "ListItem 4" },
{ id: "cr5", text: "ListItem 5", value: "ListItem 5" },
];
angular.module('dropdownlistApp', ['ejangular']).controller('dropdownlistCtrl', function ($scope) {
$scope.dataList = list;
$scope.value="ListItem 1";
$scope.change=function()
{
var obj = $('#dropdown1').data("ejDropDownList");
console.log("Selected Item's Text - " + obj.option("text"));
console.log("selected Item's Value - " + obj.option("value"));
}
});
</script>