I'm working on an Angular application that utilizes DevExtreme components, and I've encountered an issue with customizing the display of data in a DataGrid component. I have a column named "Type" that displays codes from a database, such as YPT, QRT, and QRI. Instead of directly displaying these codes, I would like the column to display user-friendly names. Specifically, instead of QRT I want to display "tests", and instead of QRI - "reports". The rest of the codes can be displayed as is. Here's a snippet of my code related to the column:
<dxi-column dataField="Type"
caption="Type"
[allowEditing]="true">
</dxi-column>
I tried using cellTemplate to achieve this goal but am having difficulty implementing the conditional logic to change the text displayed in the cell. Could someone show me how to properly implement this functionality in Angular using DevExtreme?
Thank you for any help!
I tried:
typescript
constructor(
private dataService: AdministrationService,
private exportService: ExportService,
private router: Router,
private fileUploadService: FileUploadService) {
}
typeLookupDataSource = [
{ code: 'YPT', name: 'YPT' }, // Assuming you want to display 'YPT' as is
{ code: 'QRT', name: 'tests' },
{ code: 'QRI', name: 'reports' }
];
html
<dxi-column dataField="Type"
caption="Type"
[allowEditing]="true">
<dxi-lookup dataSource="typeLookupDataSource"
valueExpr="code"
displayExpr="name">
</dxi-lookup>
</dxi-column>
In my opinion, the best way to accomplish this is the use of dxo-lookup. This way you can bind a datasource configuration/datastore to the types column and set a display expression.
Link to documentation: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/DataGrid/Columns/Column_Types/Lookup_Columns/