You can achieve the Cascading DropDownList with grid Editing by using the Cell Edit Template feature.
In the below demo, Cascading DropDownList is rendered for the ShipCountry
and ShipState
column.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Edit(new {create="countryCreate", read="countryRead", destroy="countryDestroy", write="countryWrite" }).Add();
col.Field("ShipState").HeaderText("Ship State").Width("150").EditType("dropdownedit").Edit(new {create="stateCreate", read="stateRead", destroy="stateDestroy", write="stateWrite" }).Add();
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
<script>
var countryElem;
var countryObj;
var stateElem;
var stateObj;
var country = [
{ countryName: 'United States', countryId: '1' },
{ countryName: 'Australia', countryId: '2' }
];
var state = [
{ stateName: 'New York', countryId: '1', stateId: '101' },
{ stateName: 'Virginia', countryId: '1', stateId: '102' },
{ stateName: 'Washington', countryId: '1', stateId: '103' },
{ stateName: 'Queensland', countryId: '2', stateId: '104' },
{ stateName: 'Tasmania', countryId: '2', stateId: '105' },
{ stateName: 'Victoria', countryId: '2', stateId: '106' }
];
function countryCreate() {
countryElem = document.createElement('input');
return countryElem;
}
function countryRead() {
return countryObj.text;
}
function countryDestroy() {
countryObj.destroy();
}
function countryWrite() {
countryObj = new ej.dropdowns.DropDownList({
dataSource: country,
fields: { value: 'countryId', text: 'countryName' },
change: function(){
stateObj.enabled = true;
var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value);
stateObj.query = tempQuery;
stateObj.text = null;
stateObj.dataBind();
},
placeholder: 'Select a country',
floatLabelType: 'Never'
});
countryObj.appendTo(countryElem);
}
function stateCreate() {
stateElem = document.createElement('input');
return stateElem;
}
function stateRead() {
return stateObj.text;
}
function stateDestroy() {
stateObj.destroy();
}
function stateWrite() {
stateObj = new ej.dropdowns.DropDownList({
dataSource: state,
fields: { value: 'stateId', text: 'stateName' },
enabled: false,
placeholder: 'Select a state',
floatLabelType: 'Never'
});
stateObj.appendTo(stateElem);
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}