952312: Added the topic of How to set complex column as foreign key colum

blazor/datagrid/column-rendering.md

@@ -705,3 +705,63 @@ Before proceeding this, learn about [DynamicObject Binding](https://blazor.syncf
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BtBgNdrjLuIpsnpS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+### How to set complex column as foreign key column
+
+The Syncfusion Blazor DataGrid provides the ability to use complex columns as foreign key columns. This allows related data from a foreign data source to be displayed based on the value of a complex column.
+
+The following example demonstrates how to set the **Employee.EmployeeID** column as a foreign key column, and display the **FirstName** column from the foreign data source.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using System.Dynamic
+
+<p>Complex data binding with foreign data source</p>
+
+<SfGrid DataSource="@Orders" Height="315">
+    <GridColumns>
+        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Width="120"></GridColumn>
+        <GridForeignColumn Field=Employee.EmployeeID HeaderText="Employee Name" ForeignKeyValue="FirstName" ForeignKeyField="EmployeeID" ForeignDataSource="@Employees1" Width="150"></GridForeignColumn>
+        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Width="130"></GridColumn>
+        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="120"></GridColumn>
+    </GridColumns>
+</SfGrid>
+
+@code {
+    public List<Order> Orders { get; set; }
+    public List<EmployeeData> Employees1 { get; set; }
+    protected override void OnInitialized()
+    {
+        Orders = Enumerable.Range(1, 75).Select(x => new Order()
+            {
+                OrderID = 1000 + x,
+                Employee = new EmployeeData()
+                {
+                    EmployeeID = x,
+                },
+                Freight = 2.1 * x,
+                OrderDate = DateTime.Now.AddDays(-x),
+            }).ToList();
+        Employees1 = Enumerable.Range(1, 75).Select(x => new EmployeeData()
+            {
+                EmployeeID = x,
+                FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)],
+            }).ToList();
+    }
+    public class Order
+    {
+        public int? OrderID { get; set; }
+        public EmployeeData Employee { get; set; }
+        public DateTime? OrderDate { get; set; }
+        public double? Freight { get; set; }
+    }
+    public class EmployeeData
+    {
+        public int? EmployeeID { get; set; }
+        public string FirstName { get; set; }
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBoXTisskOldOAN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

blazor/datagrid/column-template.md

@@ -564,6 +564,88 @@ public class OrderDetails
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VZVpMWhMhJHQEtIF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+### Render RadioButton in a column
+
+The Syncfusion Blazor DataGrid supports rendering a [RadioButton](https://blazor.syncfusion.com/documentation/radio-button/getting-started-webapp) within a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is particularly useful for displaying selection options such as order statuses, payment methods, or approval choices directly within the Grid.
+
+In the following example, a `RadioButton` is rendered in the **Order Status** column of the Grid by defining the `Template` property.
+
+```
+<SfRadioButton Label="Pending" Name="@radioID" Value="0" Checked="order.Freight"></SfRadioButton>
+<SfRadioButton Label="Confirmed" Name="@radioID" Value="1" Checked="order.Freight"></SfRadioButton>
+<SfRadioButton Label="Shipped" Name="@radioID" Value="2" Checked="order.Freight"></SfRadioButton>
+```
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+<SfGrid DataSource="@OrderData" AllowPaging="true" Height="350">
+    <GridColumns>
+        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.FreightStatus) HeaderText="Order Status" Width="250">
+            <Template>
+                @{
+                    var order = context as OrderDetails;
+                    var radioID = $"OrderStatus_{order.OrderID}";
+                }
+                <SfRadioButton Label="Pending" Name="@radioID" Value="0" Checked="order.FreightStatus"></SfRadioButton>
+                <SfRadioButton Label="Confirmed" Name="@radioID" Value="1" Checked="order.FreightStatus"></SfRadioButton>
+                <SfRadioButton Label="Shipped" Name="@radioID" Value="2" Checked="order.FreightStatus"></SfRadioButton>
+            </Template>
+        </GridColumn>
+    </GridColumns>
+</SfGrid>
+
+@code {
+    public List<OrderDetails> OrderData { get; set; }
+    protected override void OnInitialized()
+    {
+        OrderData = OrderDetails.GetAllRecords();
+    }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+using System.Collections.Generic;
+public class OrderDetails
+{
+    public static List<OrderDetails> Orders = new List<OrderDetails>();
+    public OrderDetails(int orderID, string customerId, int employeeId, double freight, int freightStatus)
+    {
+        this.OrderID = orderID;
+        this.CustomerID = customerId;
+        this.EmployeeID = employeeId;
+        this.Freight = freight;
+        this.FreightStatus = freightStatus;
+    }
+    public static List<OrderDetails> GetAllRecords()
+    {
+        if (Orders.Count == 0)
+        {
+            Orders.Add(new OrderDetails(10248, "VINET", 5, 32.38, 0));
+            Orders.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, 1));
+            Orders.Add(new OrderDetails(10250, "HANAR", 4, 65.83, 2));
+            Orders.Add(new OrderDetails(10251, "VICTE", 3, 41.34, 0));
+            Orders.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, 1));
+            Orders.Add(new OrderDetails(10253, "HANAR", 3, 58.17, 2));
+            Orders.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, 0));
+        }
+        return Orders;
+    }
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public int EmployeeID { get; set; }
+    public double Freight { get; set; }
+    public int FreightStatus { get; set; } // 0: Pending, 1: Confirmed, 2: Shipped
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZheXoNwgrBgAFeR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ## Using condition template
 
 The conditional column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) allows you to display template elements based on specific conditions.

blazor/datagrid/foreignKey-column.md

@@ -760,6 +760,98 @@ In the following code sample, you can prevent default filter query generation us
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrzXrWOrKYCkblp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+## Render foreign key value in column template
+
+The Syncfusion Blazor DataGrid supports rendering foreign key values within a column template, allowing for a more meaningful display of related data. Instead of showing the underlying foreign key value, you can customize the column to display a corresponding descriptive value from a related data source.
+
+To achieve this, define a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property and use the foreign key mapping to bind and render the desired value. This approach is especially useful when the foreign key refers to an ID and you want to display the corresponding name or label.
+
+The following example demonstrates how to render a foreign key value using a column template in the Grid:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+<SfGrid DataSource="@Orders" Height="315">
+    <GridColumns>
+        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" Width="120" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" />
+        <GridForeignColumn Field="EmployeeID" HeaderText="Employee Name" ForeignDataSource="@Employees" ForeignKeyField="EmployeeID" ForeignKeyValue="FirstName" Width="150">
+            <Template Context="data">
+                @{
+                    var order = (OrderData)data;
+                    var emp = Employees.FirstOrDefault(e => e.EmployeeID == order.EmployeeID);
+                }
+                <a href="#" @onclick="() => LogToConsole(order?.OrderID)">@emp?.FirstName</a>
+            </Template>
+        </GridForeignColumn>
+        <GridColumn Field="Freight" HeaderText="Freight" Format="C2" Width="120" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" />
+        <GridColumn Field="ShipCity" HeaderText="Ship City" Width="120" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" />
+    </GridColumns>
+</SfGrid>
+@code {
+    public List<OrderData> Orders { get; set; }
+    public List<EmployeeData> Employees { get; set; }
+    protected override void OnInitialized()
+    {
+        Employees = EmployeeData.GetAllRecords();
+        Orders = OrderData.GetAllRecords();
+    }
+    private async Task LogToConsole(int? orderId)
+    {
+        await JS.InvokeVoidAsync("console.log", $"OrderID clicked: {orderId}");
+    }
+    public class EmployeeData
+    {
+        public int? EmployeeID { get; set; }
+        public string FirstName { get; set; }
+        public EmployeeData(int? employeeID, string firstName)
+        {
+            EmployeeID = employeeID;
+            FirstName = firstName;
+        }
+        public static List<EmployeeData> GetAllRecords()
+        {
+            return new List<EmployeeData>
+            {
+                new EmployeeData(1, "Nancy"),
+                new EmployeeData(2, "Andrew"),
+                new EmployeeData(3, "Janet"),
+                new EmployeeData(4, "Margaret"),
+                new EmployeeData(5, "Steven")
+            };
+        }
+    }
+    public class OrderData
+    {
+        public int? OrderID { get; set; }
+        public int? EmployeeID { get; set; }
+        public string ShipCity { get; set; }
+        public double? Freight { get; set; }
+        public OrderData(int? orderId, int? employeeId, string shipCity, double? freight)
+        {
+            OrderID = orderId;
+            EmployeeID = employeeId;
+            ShipCity = shipCity;
+            Freight = freight;
+        }
+        public static List<OrderData> GetAllRecords()
+        {
+            return new List<OrderData>
+            {
+                new OrderData(10248, 1, "Reims", 32.18),
+                new OrderData(10249, 2, "Münster", 33.33),
+                new OrderData(10250, 3, "Rio de Janeiro", 12.35),
+                new OrderData(10251, 4, "Lyon", 63.43),
+                new OrderData(10252, 5, "Charleroi", 56.98),
+            };
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrSDojmVniWmsTS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Enable multiple foreign key columns