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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change event on dropdownedit field

Thread ID:

Created:

Updated:

Platform:

Replies:

143052 Mar 1,2019 09:52 PM UTC Mar 6,2019 03:39 AM UTC ASP.NET Core - EJ 2 1
loading
Tags: DataGrid
Gary Petrie
Asked On March 1, 2019 09:52 PM UTC

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 [Syncfusion]
Replied On March 6, 2019 03:39 AM UTC

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> 


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


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

Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon