How do I display a foreign key's related value in a data grid after initial scaffolding?

Radzen.Blazor Components
1

Hi all,
I’m trying to figure out something that seems basic, but I can’t get it working.

I have a bookings table that includes a foreign key propid, which references id in the properties table. I want to show properties.name in a bookings grid (instead of the raw foreign key value).

Example structure:

  • bookings.propid → foreign key to properties.id
  • properties.id
  • properties.name

What I want:
In the bookings grid, I want to show the name of the property (properties.name) for each booking.

Where I'm stuck:
I’ve added the field manually, but property.name doesn’t appear in the dropdown when I try to bind it to the column. I can’t figure out where to add or expose that field.

Yes, I know that when generating the grid initially using scaffolding, I could have selected this relationship then — but I’m trying to add it after the fact, and that’s where I’m stuck.

2

I am pasting my reply to the email you have sent us with the same content. Feel free to continue the communication here or over email.

Hi Nick,

Foreign key properties should work out of the box when you generate CRUD pages. The only requirement is to have a foreign key constraint in the database.

  1. Make sure your tables have a foreign key constraint in the database. This is a requirement for Radzen Blazor Studio to know there is a relationship between the tables.
  2. Use the CRUD pages wizard to create the data grid. It will automatically generate columns for displaying related data.

Here is an example for a typical OrderDetail -> Product relationship.

The OrderDetail class generated by Radzen Blazor Studio has a Product property which we can use to display the ProductName field:

    public partial class OrderDetail
    {
        public int Id { get; set; }

        public Product Product { get; set; } // The product associated with an order
    }

    [Table("Products", Schema = "dbo")]
    public partial class Product
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int Id { get; set; }

        [Required]
        public string ProductName { get; set; }
    }

The generated code is for the page that lists order details in a data grid would contain something like this:

dataGridData = await DbService.GetOrderDetails(new Query { Expand = "Product" });

The Expand setting is used to tell which related entities to populate. In this case it is "Product" as we want to populate the Product property.

Then here is the definition of the column which displays the ProductName property:

<RadzenDataGridColumn TItem="EmptyApp.Models.RadzenSample.OrderDetail"
Property="Product.ProductName" Title="Product">
</RadzenDataGridColumn>
3

Thank you for the code; is there a video or document where the expand setting is in Radzen Studio as opposed to just the code...

4

You can check the Query Builder.