Change event on dropdownedit field

[Gary Petrie]

Hi,

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-columns>

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

    </e-grid-columns>

</ejs-grid>

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

Thanks

[Thavasianand Sankaranarayanan]

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. 

[index.cshtml] 

<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-columns> 

          .  .  .  .  

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

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    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; 

                stateObj.dataBind(); 

            }, 

            placeholder: 'Select a country', 

            floatLabelType: 'Never' 

        }); 

        countryObj.appendTo(countryElem); 

    }; 

 

</script> 

Sample link: http://www.syncfusion.com/downloads/support/forum/143052/ze/cascading-ddremote1629724882-943475024.zip 

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

Help Documentation: https://ej2.syncfusion.com/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/?no-cache=1 

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

Regards, 

Thavasianand S.