Before component rendering, you can get the total items count by using actionComplete event with its result arguments. After rendering this component, you can get the total items count by using getItems method.
The following example demonstrate how to get the total items count.
import { DropDownList } from '@syncfusion/ej2-dropdowns';
//import DataManager related classes
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
// initiates the component
let customers: DropDownList = new DropDownList({
// bind the DataManager instance to dataSource property
dataSource: new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
adaptor: new ODataV4Adaptor,
crossDomain: true
}),
// bind the Query instance to query property
query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),
// map the appropriate columns to fields property
fields: { text: 'ContactName', value: 'CustomerID' },
// set the placeholder to DropDownList input
placeholder:"Select a customer",
// sort the resulted items
actionComplete: function (e: any) {
// get total items count
console.log("Total items count: " + e.result.length);
let element: HTMLElement = document.createElement('p');
element.innerText = "Total items count: " + e.result.length;
document.getElementById('event').append(element);
}
});
//render the component
customers.appendTo('#ddlelement');
document.getElementById('btn').onclick = () => {
// get items count using getItems method
console.log("Total items count: " + customers.getItems().length);
let element: HTMLElement = document.createElement('p');
element.innerText = "Total items count: " + customers.getItems().length;
document.getElementById('event').append(element);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 DropDownList</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container' style="margin:0 auto; width:250px;">
<br>
<input type="text" id='ddlelement' />
<div style='margin: 50px'>
<button id='btn' class='e-btn e-control'> Get items</button>
</div>
<p id='event'> </p>
</div>
</body>
</html>