Detect whether the value change happened by manual or programmatic

12 Apr 20225 minutes to read

You can check whether the value change happened by manual or programmatic by using change event argument, that argument name is isInteracted.

CSHTML

<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 a employee" index="2" popupHeight="220px">
            <e-dropdownlist-fields value="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 = 'Changes happened by Interaction';
        }
        else {
            element.innerText = 'Changes happened by programmatic';
        }
        document.getElementById('event').append(element);
    }
</script>

Employees.cs

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;
        }
    }
}