Modify the result data before passing to DropDownList when binding remote data source

12 Apr 20222 minutes to read

When binding the remote data source, by using the actionComplete event, you can modify the result data before passing it to DropDownList.

CSHTML

<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="customers" actionComplete="actionComplete" query="new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6)" 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>
<script>
    function actionComplete(e) {
        // initially result contains 6 items
        console.log("Before modified the result: " + e.result.length);
        // remove first 2 items from result.
        e.result.splice(0, 2);
        // now displays the result count is 4.
        console.log("After modified the result: " + e.result.length);
    }
</script>

Modifydata.cs

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 modifydata()
        {
            return View();
        }
    }
}