Modify data before passing to DropDownList for remote data binding

7 Jun 20241 minute 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

@Html.EJS().DropDownList("customers").Placeholder("Select a customer").ActionComplete("actionComplete").PopupHeight("200px").DataSource(dataManger =>
            dataManger.Url("https://services.odata.org/V4/Northwind/Northwind.svc/").Adaptor("ODataV4Adaptor").CrossDomain(true)).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings
            {
                Text = "ContactName",
                Value = "CustomerID"
            }).Query("new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6)").Render()
<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();
        }
    }
}