Cascading DropDownList with Grid editing in Angular

Question

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 · Answer

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