Cascading DropDownList with Grid editing in Angular

[Nambi Ramamoorthy]

Hi Team, 

I am using cascading dropdown list in angular ejs-grid . I have achieved that functionality using below link 

https://ej2.syncfusion.com/angular/documentation/grid/how-to/example-of-angular-ui-grid-to-edit-a-cell-using-cascading-drop-down-list/#example-of-angular-ui-grid-to-edit-a-cell-using-cascading-dropdown-list

My Question is like,

How to bind the values in dropdown list when user doing Edit operation in the grid ? 

For Ex , I have a below grid , see the first record where Ship country is Australia and Ship state is Queensland (Ship State dropdown loaded based on selected country)

once I edit that record the dropdown values are getting cleared and asking user to select it again as see below,

I need the solution for , when user clicks on Edit button the dropdown should bind the actual value for Ship country (Australia) and Ship State (Queensland) , instead of clearing the both dropdowns . How to achieve this ?

Thanks 

Nambi R

[Rajapandi Ravi]

Hi Nambi, 

Greetings from syncfusion support. 

Query: How to bind the values in dropdown list when user doing Edit operation in the grid ?  

From your update, we could see that you want to display value in the dropdownlist once the record is in edit state. Since you are using cascading dropdown list, for displaying the current row cell value you need to set it as the dropdown’s text property value as demonstrated in the below code snippet, 

// Edit params for first dropdown 

this.countryParams = { 

        write: (args) => { 

            this.countryObj = new DropDownList({ 

                dataSource: this.country, 

                // Current value is set as dropdown’s selected text 

                text: args.rowData[args.column.field], 

                fields: { value: 'countryId', text: 'countryName' } 

                      . 

                      . 

            }); 

            this.countryObj.appendTo(this.countryElem); 

        } 

}; 

// Edit params for second dropdown 

this.stateParams = { 

        write: (args) => { 

            this.stateObj = new DropDownList({ 

                dataSource: this.state, 

                // Current value is set as dropdown’s selected text 

                text: args.rowData[args.column.field], 

                fields: { value: 'stateId', text: 'stateName' }, 

                      . 

                      . 

            }); 

            this.stateObj.appendTo(this.stateElem); 

        } 

} 

Sample: https://stackblitz.com/edit/angular-nj2hfx-4zra2b?file=app.component.ts 

Screenshot: 

 

Regards, 

Rajapandi R