How to count remote data bound to ASP.NET CORE DropDownList

24 Aug 20262 minutes to read

Before control rendering, you can get the total items count by using ActionComplete event with its result arguments. After rendering this control, you can get the total items count by using the getItems method.

<ejs-button id="btn" content="Get Items"></ejs-button>
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="customers" query="new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6)" actionComplete="actionComplete" placeholder="Select a customer" popupHeight="200px">
            <e-dropdownlist-fields text="ContactName" value="CustomerID"></e-dropdownlist-fields>
            <e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/" adaptor="ODataV4Adaptor" crossDomain="true"></e-data-manager>
        </ejs-dropdownlist>
    </div>
</div>
<p id='event'> </p>
<script>
    function actionComplete (e) {
         // get total items count
         console.log("Total items count: " + e.result.length);
         var element = document.createElement('p');
         element.innerText = "Total items count: " + e.result.length;
         document.getElementById('event').append(element);
    }
    document.getElementById('btn').onclick = () => {
        var element = document.createElement('p');
        document.getElementById("event").innerHTML = "";
        var Obj = document.getElementById("customers").ej2_instances[0];
        element.innerText = "Total items count: " + Obj.getItems().length;
        document.getElementById('event').append(element);
    };
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class DropDownListController : Controller
    {
        public ActionResult totalcount()
        {
            return View();
        }
    }
}