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

@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();
}