How to detect programmatic value change in ASP.NET CORE DropDownList

24 Aug 20265 minutes to read

You can determine whether a value change was caused by user interaction or programmatically by inspecting the change event argument. The isInteracted property returns true when the change originated from a user interaction in the UI, and false when it was set programmatically (for example, by assigning the value property). The following sample demonstrates both cases: the button triggers a programmatic change, while selecting an item in the dropdown triggers an interaction-driven change.

<ejs-button id="change" content="Change the value dynamically"></ejs-button>
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="employee" change="onChange" dataSource="@ViewBag.data" placeholder="Select an employee" index="2" popupHeight="200px">
            <e-dropdownlist-fields value="Name" text="Name"></e-dropdownlist-fields>
        </ejs-dropdownlist>
    </div>
</div>
<p id='event'> </p>
<script>
    document.getElementById('change').onclick = () => {
        var dropObject = document.getElementById("employee").ej2_instances[0];
        dropObject.value = 'Andrew Fuller';
    };
    function onChange(args) {
        let element = document.createElement('p');
        document.getElementById("event").innerHTML = "";
        if (args.isInteracted) {
            element.innerText = 'Changed by user interaction';
        }
        else {
            element.innerText = 'Changed programmatically';
        }
        document.getElementById('event').append(element);
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Employees
    {
        public string Name { get; set; }
        public string Eimg { get; set; }
        public string Designation { get; set; }
        public string Country { get; set; }
        public List<Employees> EmployeesList()
        {
            List<Employees> emp = new List<Models.Employees>();
            emp.Add(new Employees { Name= "Andrew Fuller", Eimg= "7", Designation = "Team Lead", Country= "England"});
            emp.Add(new Employees { Name= "Anne Dodsworth", Eimg= "1", Designation = "Developer", Country= "USA"});
            emp.Add(new Employees { Name= "Janet Leverling", Eimg= "3", Designation = "HR", Country= "USA"});
            emp.Add(new Employees { Name= "Laura Callahan", Eimg= "2", Designation = "Product Manager", Country= "USA"});
            emp.Add(new Employees { Name= "Margaret Peacock", Eimg= "6", Designation = "Developer", Country= "USA"});
            emp.Add(new Employees { Name= "Michael Suyama", Eimg= "9", Designation = "Team Lead", Country= "USA"});
            emp.Add(new Employees { Name= "Nancy Davolio", Eimg= "4", Designation = "Product Manager", Country= "USA"});
            emp.Add(new Employees { Name= "Robert King", Eimg= "8", Designation = "Developer", Country= "England"});
            emp.Add(new Employees { Name= "Steven Buchanan", Eimg= "10", Designation = "CEO", Country= "England" });
            return emp;
        }
    }
}