Binding the Grid columns display text to dropdownedit's text

[Ron Craven]

Hi, I'm trying to work with the sample

https://ej2.syncfusion.com/angular/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/

The country model has countryName and countryId.
In the example, he dropdowns' countryParams uses countryName for BOTH the text and the value.
If the underlying data of the grid column is countryId, how do I display the associated countryName in the grid cell rather than the countryId, but still save the countryId (not countryName) when editing.

many thanks
Ron

[Balaji Sekar]

Hi Ron, 

 

Greetings from the Syncfusion support. 

 

Based on your query you need to bind the associated value in the grid instead of displaying the field value column. To achieve your requirement we suggest you to use foreignKey Column feature. In this feature we can bind custom data values in Grid column based on field. 

 

For your reference we have shared the Documentation link for more information 

 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#foreign-key-column 

 

In the following example, Customer Name is a foreign column which shows ContactName column from foreign data. 

 

Please refer the below code example and sample for more information. 

 

[app.component.html] 

     <ejs-grid #grid [dataSource]='data' [allowPaging]='true' [pageSettings]="pageSettings"  

    [editSettings]='editOptions' [toolbar]='toolbarItems' [allowSorting]='true'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' [validationRules]='orderidrules' isPrimaryKey='true'></e-column> 

            <e-column field='CustomerID' headerText='Customer Name' width='150' 

            foreignKeyValue='ContactName' foreignKeyField='CustomerID' [dataSource]='customerData' [validationRules]='orderidrules'></e-column> 

            <e-column field='Freight' headerText='Freight' width='100' format='C2' textAlign='Right' editType='numericedit'></e-column> 

            <e-column field='ShipName' headerText='Ship Name' width='170'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></e-column> 

        </e-columns> 

    </ejs-grid> 

 

Sample link: https://stackblitz.com/edit/angular-k4muc9 

 

Demo sample: https://ej2.syncfusion.com/angular/demos/#/material/grid/column/foreign-key 

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar 

[Ron Craven]

Thanks for your help ... much appreciated

[Balaji Sekar]

Hi Ron, 

 

Happy to hear that an issue has been resolved in your end. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar