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

Subscribe to this post

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

Reply | Reply with quote

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>

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.

Reply | Reply with quote

Change event on dropdownedit field

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US