How to render cascading dropdown while editing?

<ej-grid id="Grid" #grid [dataSource]="datasource" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" (actionComplete)="Complete($event)" >

    <e-columns>

        <e-column field="OrderID"  headerText="OrderID" isPrimaryKey="true" width="75"></e-column>

        <e-column field="EmployeeID" headerText="EmployeeID" width="75" ></e-column>

        <e-column field="CustomerID" headerText="Designation" width="75" foreignKeyField= "CustomerID" foreignKeyValue= "Designation" [dataSource]= "data"></e-column>          

        <e-column field="ShipCity" headerText="Country" width="75" foreignKeyField= "ShipCity" foreignKeyValue= "country" [dataSource]= "data1"></e-column>            

    </e-columns>

</ej-grid>

import {Component, ViewEncapsulation,ViewChild} from '@angular/core';

import {CommonModule} from "@angular/common";

import { EJComponents } from "ej-angular2/src/ej/core";

@Component({

    selector: 'ej-app',

    templateUrl: 'src/grid/grid.component.html',

})

export class GridComponent {

  public datasource;

  public editSettings;

  public toolbarItems;

  public data;

  public data1;

  @ViewChild('grid') grid: EJComponents<any, any>;

  constructor() {

    //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'

          this.datasource = [

                   {OrderID:10001,EmployeeID:1,CustomerID:"ALFKI",ShipCity:"Berlin"},

                   {OrderID:10001,EmployeeID:1,CustomerID:"ALFKI",ShipCity:"Berlin"},

                   {OrderID:10002,EmployeeID:2,CustomerID:"ANATR",ShipCity:"Madrid"},

                   {OrderID:10003,EmployeeID:3,CustomerID:"BOLID",ShipCity:"Cholchester"},

                   {OrderID:10004,EmployeeID:4,CustomerID:"ANATR",ShipCity:"Tsawassen"},

                   {OrderID:10005,EmployeeID:5,CustomerID:"ANTON",ShipCity:"Berlin"},

                   {OrderID:10006,EmployeeID:6,CustomerID:"ALFKI",ShipCity:"Cholchester"},

                   {OrderID:10007,EmployeeID:7,CustomerID:"BLONP",ShipCity:"Marseille"},

                   {OrderID:10008,EmployeeID:8,CustomerID:"BOLID",ShipCity:"Tsawassen"}

                                   ];

          this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true};

          this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]};

          this.data = [

                         {CustomerID:"ALFKI",Designation:"Sales Rep"},

                         {CustomerID:"ANATR",Designation:"Admin"},

                         {CustomerID:"ANTON",Designation:"Manager"},

                         {CustomerID:"BLONP",Designation:"Representative"},

                        {CustomerID:"BOLID",Designation:"Assistant Manager"}];

     this.data1 = [

                          {ShipCity:"Berlin",Designation:"Sales Rep",country:"India"},

                          {ShipCity:"Madrid",Designation:"Admin",country:"USA"},

                          {ShipCity:"Cholchester",Designation:"Manager",country:"Russia"},

                          {ShipCity:"Marseille",Designation:"Representative",country:"Australia"},

                          {ShipCity:"Tsawassen",Designation:"Assistant Manager",country:"UK"}

                          ];

  }

  Complete(args: any) {

    if (args.requestType == "beginedit" || args.requestType == "add") {

        $("#GridCustomerID").ejDropDownList({ change: function(e){

            $.ajax({

                url: 'http://localhost:49449/Home/Datasource',

                type: 'GET',

                data: { "designation": e.text },//pass the selectedValue of the dropdown to server side

                success: function (data1) {

                    $("#GridShipCity").ejDropDownList({ dataSource: data1 });//assign the filtered dataSource obtained from serverSide

                    $("#GridShipCity").ejDropDownList({ selectedIndex: 0 });

                }

            })

        } });//bind the change event to dropdown

        if (args.requestType == "beginedit") {

            var titleObj = $("#GridCustomerID").data("ejDropDownList");//get the edited dropdown object

            titleObj.selectItemByValue(args.rowData.CustomerID);

            $.ajax({

                url: 'http://localhost:49449/Home/Datasource',

                type: 'GET',

                data: { "designation": titleObj.getSelectedValue() },//passed the selectedValue of the dropdown to server side

                success: function (data1) {

                    $("#GridShipCity").ejDropDownList({ dataSource: data1, selectedItemIndex: 0 });//assign the filtered dataSource obtained from serverSide

                }

            })

        }

    }

}

}