Grid - How to set/show selected value in dropdown

Question

Grid - How to set/show selected value in dropdown I am not seeing the dropdown values and also the selected value

this.ddParamsP = { params: { allowFiltering: true, dataSource: this.usersData, fields: { text: 'name', value: 'personageDetailId' }, // query: new Query(), actionComplete: () => false } }

Balaji Sekar · Accepted Answer

Hi Vin, 
 
Greetings from the Syncfusion support. 
 
We have validated the dropdownedit type value property does not work while it was being used in edit params option. In edit params we cannot set dropdownedit value, so we suggest to use the cellEditTemplate feature to externally render dropdownlist, then we can use the required dropdownlist properties. For more information please refer to the example code, sample and Documentation below. 
 
[app.component.ts] 




... 
export class NormalEditComponent implements OnInit { 
... 
   public ngOnInit(): void { 
        this.data = orderDatas; 
... 
        this.ddParamsP= { 
                        create: () => { 
                            this.elem = document.createElement('input'); 
                            return this.elem; 
                        }, 
                        read: () => { 
                            return this.dropdownObj.text; //return text property value while selected dropdown item 
                        }, 
                        destroy: () => { 
                            this.dropdownObj .destroy(); 
                        }, 
                       write: (args: { rowData: any, column: any }) => { 
                                                    
                            this.dropdownObj  = new DropDownList({ 
                              dataSource: <any>orderDatas,     
                            value: (args.rowData as any).OrderID,      // set the value property field while editing CustomerID column 
                             fields: { text: 'CustomerID', value: 'OrderID' } 
                            }); 
                            this.dropdownObj .appendTo(this.elem); 
                        } 
                    } 

        this.pageSettings = {pageCount: 5}; 
    } 
} 
 
Sample: https://stackblitz.com/edit/angular-kc9hah-ibnjxz?file=normal-edit.component.ts 
 
Documentation: https://ej2.syncfusion.com/documentation/drop-down-list/api-dropDownList.html?lang=typescript#fields 
                                https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-template 

please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar

vin · Answer

ThanksIn the grid display mode, i am seeing Product owner ID, instead i need to see the name in the display modeIn edit mode, i am able to see the name of the product ownerHow to make it see owner name id display mode?

Ajith Govarthan · Answer

Hi Vin, 

Thanks for the update. 

Based on your requirement we suspect that you want to use the foreign key column feature of our EJ2 grid. When you use foreign key column feature the dropdown will be rendered for the corresponding column. 

In EJ2 Grid the foreignKey field value will be shown and when you edit the row and select the data from the dropdown will store the appropriate foreignkey value in the datasource. So you can use the foreignkey column feature to show the text values in the grid and can store the id values using the foreign key feature. 

UG-Link: https://ej2.syncfusion.com/angular/documentation/grid/columns/#foreign-key-column 

Please get back to us if you need further assistance. 

Regards, 
Ajith G.

vin · Answer

Its not working, not seeing any error. Looks like its not able to map foreign key e-column>Spinner keeps loading !! Products array - aProductsname: "Imperva"ownerPersonageDetailId: 5personageDetailId: 5syndicateDetailId: 7syndicateProductId: 1Users Array - usersDataname: "Test Test"personageDetailId: 5Any other solution ?

Balaji Sekar · Answer

Hi Vin, 
 
We have validated your query with provided the information and we suspect that you have used edit params in foreignKey column. We suggest you to avoid the editparams in foreignkey column. By default, foreignKey column bind the dropdown editing with foreignKey column dataSource.  
 
If you face sample problem, please share the below details to us that will help to validate further. 
 

Share the video demonstration of the problem.
Share a sample with replicated problem, if possible
Ensure the Syncfusion package version.
 
Regards, 
Balaji Sekar

vin · Answer

tried removing editparams in foreignkey column, no luckcan you please create a sample with the data samples i gaveProducts array - aProductsname: "Imperva"ownerPersonageDetailId: 5personageDetailId: 5syndicateDetailId: 7syndicateProductId: 1Users Array - usersDataname: "Test Test"personageDetailId: 5

Balaji Sekar · Answer

Hi Vin, Thanks for your patience, We have created a sample with information provided, and it works properly when using the ForeignKey Column option with your requirement. We suspect that by editparams you have bound the ForeigbKey Column dataSource that is causing the problem. We do have dataSource property in Grid column while using ForeignKey feature. Please refer to the code example and sample for more information. [app.component.html]

[app.component.ts] this.aProducts = [ { name: "Imperva", ownerPersonageDetailId: 5, personageDetailId: 5, syndicateDetailId: 7, syndicateProductId: 1 } ]; this.userData = [ { name: "Test Test", personageDetailId: 5 } ] Sample: https://stackblitz.com/edit/angular-bvwutc-ubnnes For your reference, we shared Help Documentation to know details about the ForeignKey Column feature as seen below Help Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#foreign-key-column Please get back to us, if you need further assistance. Regards, Balaji Sekar