We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change event on dropdownedit field


I have a grid with a dropdownedit field and another text field further along the row. 

The grid I have so far is 

<ejs-grid id="Grid" allowFiltering="true" allowSorting="true" allowPaging="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "Add","Delete","Update", "Cancel" })">
    <e-data-manager url="@dsURL" crudUrl="@crudURL" adaptor="UrlAdaptor"></e-data-manager>
    <e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true" mode="Normal" showConfirmDialog="true" showDeleteConfirmDialog="true"></e-grid-editSettings>
        <e-grid-column field="ExpenseID" isPrimaryKey="true" visible="false" type="number"></e-grid-column>
        <e-grid-column field="TransactionDate" headerText="Date" type="date" editType="datepickeredit"></e-grid-column>
        <e-grid-column field="SectionID" headerText="Section" type="long" editType="dropdownedit" dataSource="@ViewBag.Sections" foreignKeyField="ID" foreignKeyValue="Name"></e-grid-column>
        <e-grid-column field="RefCode" headerText="Ref" type="string"></e-grid-column>

What I would like to happen is that when the user chooses a value in the dropdown field SectionID, that RefCode is populated with a value determined by issuing a call to the server.

I'm guessing I need to attach a change event to SectionID which will then perform an AJAX call with the value of the dropdown to get the value form the server and then set that value to the RefCode field. I had done something similar with ASP.Net MVC library, but I have no idea how to achieve this in EJ2 Core.

Hopefully this make sense!

Any help greatly appreciated


1 Reply

TS Thavasianand Sankaranarayanan Syncfusion Team March 5, 2019 10:39 PM

Hi Gary, 

Greetings from the Syncfusion, 

We have validated your query and we have created a sample with remote data bind in dropdown editing in Grid component. In the below sample, you can edit the dropdown edit column depending upon to bind next column data and bind the remote data in the dropdownlist. We have this support like cascading dropdown edit in the EJ2 Grid. Please refer the below code example and sample for more information. 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true"> 
    <e-grid-pagesettings pageSize="5"></e-grid-pagesettings> 
    <e-datamanager url="/Home/UrlDatasource" insertUrl="/Home/Insert" updateUrl="/Home/Update"  adaptor="UrlAdaptor"></e-datamanager> 
    <e-grid-editSettings allowAdding="true" allowEditing="true"></e-grid-editSettings> 
          .  .  .  .  
        <e-grid-column field="EmployeeID" headerText="Employee ID" width="110"></e-grid-column> 
        <e-grid-column field="ShipCountry" valueAccessor="@("shipCountry")" headerText="ShipCountry" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="110"></e-grid-column> 
        <e-grid-column field="ShipCity" valueAccessor="@("shipCity")" width="110" edit="@(new {create = "createcity", read = "readcity", destroy = "destroycity", write = "writecity"})"> </e-grid-column> 
    function shipCountry(field, data, column) { 
        var country; 
        .    .   .   .   
        data[field] = country; 
        return country; 
    function shipCity(field, data) { 
        var city; 
         .     .      .     . 
        data[field] = city; 
        return city; 
     //Remote data 
   window["shippedData"] = new ej.data.DataManager({ 
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/', 
        adaptor: new ej.data.ODataV4Adaptor, 
    function write(args) { 
        countryObj = new ej.dropdowns.DropDownList({ 
            dataSource: shippedData, // bind the Remote data 
            fields: { value: 'EmployeeID', text: 'ShipCountry' }, 
            value: args.rowData['ShipCountry'], 
            change: function () {        
              // pass the query from “ShipCountry” to “ShipCity” using foreignKeyValue(“EmployeeID”) 
                stateObj.enabled = true; 
                var tempQuery = new ej.data.Query().where('EmployeeID', 'equal', countryObj.value); 
                stateObj.query = tempQuery; 
                stateObj.text = null; 
            placeholder: 'Select a country', 
            floatLabelType: 'Never' 

Please refer the below Documentation to know details about the cascading dropdownlist. 

Please get back to us, if you need further assistance. 

Thavasianand S. 

Live Chat Icon For mobile
Up arrow icon