Example of Foreign Key Column in Blazor DataGrid Component
This example shows how to use the DataGrid component with the foreign key column feature. For the foreign key column, you can also perform sorting, filtering, and editing operations.
Local Data
Order ID | First Name | Freight | Order Date | Ship Country |
|---|
| No records to display |
Remote Data
Order ID | First Name | Order Date | Freight | Ship Country |
|---|
| No records to display |
Foreign key columns can be displayed in the Blazor DataGrid. It can be enabled by using the GridForeignColumn directive's ForeignDataSource, ForeignKeyField and ForeignKeyValue properties.
ForeignKeyValue will sort foreign key columns in local data instead of ForeignKeyField.
To bind the foreign key column to remote collection of items, the SfDataManager component was used and supplied the URL action instead of a static collection of items.
Also, it is mandatory to define the properties of ForeignKeyField and ForeignKeyValue in the GridForeignColumn directive.
More information about the Foreign Key column feature can be found in this documentation section.