Blazor DataGrid Example - Foreign Key Columns
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 Press Enter to sort. Press Alt Down to open filter Menu | First Name Press Enter to sort. Press Alt Down to open filter Menu | Freight Press Enter to sort. Press Alt Down to open filter Menu | Order Date Press Enter to sort. Press Alt Down to open filter Menu | Ship Country Press Enter to sort. Press Alt Down to open filter Menu |
|---|
| No records to display |
Remote Data
Order ID Press Enter to sort. Press Alt Down to open filter Menu | First Name Press Enter to sort. Press Alt Down to open filter Menu | Order Date Press Enter to sort. Press Alt Down to open filter Menu | Freight Press Enter to sort. Press Alt Down to open filter Menu | Ship Country Press Enter to sort. Press Alt Down to open filter Menu |
|---|
| 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.