diff --git a/blazor/datagrid/column-rendering.md b/blazor/datagrid/column-rendering.md
index 824a188a87..5b9994ea73 100644
--- a/blazor/datagrid/column-rendering.md
+++ b/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
+
+Complex data binding with foreign data source
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List Orders { get; set; }
+ public List 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" %}
\ No newline at end of file
diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md
index 5f6e5489e0..07830ba0be 100644
--- a/blazor/datagrid/column-template.md
+++ b/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.
+
+```
+
+
+
+```
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+ @{
+ var order = context as OrderDetails;
+ var radioID = $"OrderStatus_{order.OrderID}";
+ }
+
+
+
+
+
+
+
+
+@code {
+ public List 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 Orders = new List();
+ 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 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.
diff --git a/blazor/datagrid/foreignKey-column.md b/blazor/datagrid/foreignKey-column.md
index 35854beebd..1196489664 100644
--- a/blazor/datagrid/foreignKey-column.md
+++ b/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
+
+
+
+
+
+
+ @{
+ var order = (OrderData)data;
+ var emp = Employees.FirstOrDefault(e => e.EmployeeID == order.EmployeeID);
+ }
+ @emp?.FirstName
+
+
+
+
+
+
+@code {
+ public List Orders { get; set; }
+ public List 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 GetAllRecords()
+ {
+ return new List
+ {
+ 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 GetAllRecords()
+ {
+ return new List
+ {
+ 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