Blazor DataGrid Example - Foreign Key Columns
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 |
This sample demonstrates how to use the foreign key column feature in the DataGrid component with full support for sorting, filtering, and editing.
Foreign key columns display related data from a separate datasource, enabling you to present meaningful information instead of raw ID values. Enable foreign key columns using the GridForeignColumn directive with the following properties:
- ForeignDataSource - Specifies the collection of foreign key data
- ForeignKeyField - Identifies the foreign key field in the foreign datasource
- ForeignKeyValue - Specifies the display field value from the foreign datasource
The ForeignKeyValue property sorts foreign key columns using the display field instead of the ForeignKeyField.
For binding foreign key columns to remote data collections, use the SfDataManager component with a URL action instead of static collections. Define the ForeignKeyField and ForeignKeyValue properties in the GridForeignColumn directive.
For more information about foreign key columns, refer to the foreign key column documentation.