Search results

Cascading DropDownList with Grid editing in ASP.NET MVC Grid control

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.

razor
cascading.cs
@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();
}