Repository: syncfusion-content/blazor-docs
Pull request #5813: 952312: Added the topic of How to set complex column as foreign key colum
Author: login: ghost
Labels: name: documentation
description: Improvements or additions to documentation
Created: 2025-04-11T05:39:14Z | Merged: 2025-05-07T11:28:36Z

1.Complex column with foreign key column
Sample: https://blazorplayground.syncfusion.com/embed/LtBoXTisskOldOAN?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

2.Radio button component
sample: https://blazorplayground.syncfusion.com/embed/rZheXoNwgrBgAFeR?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

3.Render foreign key value in column template
Sample: https://blazorplayground.syncfusion.com/embed/VNVSXotQVxiXwxXo?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5





Diff:
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
+
+<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" %}
\ 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.
+
+```
+<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.
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
+
+<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
 


Reviews:
user: login: farveensulthana
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-07T05:54:46Z
user: login: farveensulthana
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-07T11:28:29Z

Review comments:
diff_hunk: @@ -564,6 +564,67 @@ 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 DataGrid by defining the `Template` property.
path: blazor/datagrid/column-template.md
user: login: farveensulthana
body: column of the DataGrid -> why here used as DataGrid instead of Grid 
created_at: 2025-05-06T16:58:58Z
author_association: COLLABORATOR
diff_hunk: @@ -564,6 +564,67 @@ 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 DataGrid by defining the `Template` property.
+
+```
+<SfRadioButton Label="Pending" Name="@radioGroupName" Value="0" Checked="raido.Freight"></SfRadioButton>
+<SfRadioButton Label="Confirmed" Name="@radioGroupName" Value="1" Checked="raido.Freight"></SfRadioButton>
+<SfRadioButton Label="Shipped" Name="@radioGroupName" Value="2" Checked="raido.Freight"></SfRadioButton>
+```
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using System.Dynamic
+@using Syncfusion.Blazor.Buttons
+
+<SfGrid DataSource="@Orders" AllowPaging="true"  Height="315">
+    <GridColumns>
+        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="70"></GridColumn>
+        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" TextAlign="TextAlign.Right" Width="100"></GridColumn>
+        <GridColumn HeaderText=" Order Status">
+            <Template>
+                @{
+                    var raido = (context as Order);
path: blazor/datagrid/column-template.md
user: login: farveensulthana
body: use valid name here --> dont use raido--> use Data similiar to other Template topics. Verifiy all other topics and provide name 
created_at: 2025-05-06T17:03:24Z
author_association: COLLABORATOR
diff_hunk: @@ -564,6 +564,67 @@ 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 DataGrid by defining the `Template` property.
+
+```
+<SfRadioButton Label="Pending" Name="@radioGroupName" Value="0" Checked="raido.Freight"></SfRadioButton>
+<SfRadioButton Label="Confirmed" Name="@radioGroupName" Value="1" Checked="raido.Freight"></SfRadioButton>
+<SfRadioButton Label="Shipped" Name="@radioGroupName" Value="2" Checked="raido.Freight"></SfRadioButton>
+```
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using System.Dynamic
+@using Syncfusion.Blazor.Buttons
+
+<SfGrid DataSource="@Orders" AllowPaging="true"  Height="315">
+    <GridColumns>
+        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="70"></GridColumn>
+        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" TextAlign="TextAlign.Right" Width="100"></GridColumn>
+        <GridColumn HeaderText=" Order Status">
+            <Template>
+                @{
+                    var raido = (context as Order);
+                    var radioGroupName = $"RadioBtn_{raido.OrderID}";
path: blazor/datagrid/column-template.md
user: login: farveensulthana
body: radioGroupName --> this too change as radioID 
Also change in preview sample as well
created_at: 2025-05-06T17:03:54Z
author_association: COLLABORATOR
diff_hunk: @@ -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 Blazor DataGrid:
path: blazor/datagrid/foreignKey-column.md
user: login: farveensulthana
body: change as Grid.. For trailing sentence i said to use Grid only. Why you hve used Blazor DataGrid:
created_at: 2025-05-07T05:42:08Z
author_association: COLLABORATOR
diff_hunk: @@ -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 Blazor DataGrid:
+
+{% 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="#">@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)
path: blazor/datagrid/foreignKey-column.md
user: login: farveensulthana
body: Sample need clarification
created_at: 2025-05-07T05:54:43Z
author_association: COLLABORATOR

PR comments:
user: login: SyncfusionBuild
created_at: 2025-04-11T05:40:17Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6111/console)**
author_association: CONTRIBUTOR
user: login: SyncfusionBuild
created_at: 2025-04-11T05:41:57Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6111/)<br/>Technical Error(s): 0<br/>Spelling Error(s): 0<br/>Image Alt Text Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6111/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6111/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6111/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6111/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6111/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6111/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/blazor-docs/6111/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6111/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6111/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: CONTRIBUTOR
user: login: SyncfusionBuild
created_at: 2025-04-11T06:09:49Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6114/console)**
author_association: CONTRIBUTOR
user: login: SyncfusionBuild
created_at: 2025-04-11T06:11:29Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6114/)<br/>Technical Error(s): 0<br/>Spelling Error(s): 0<br/>Image Alt Text Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6114/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6114/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6114/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6114/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6114/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6114/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/blazor-docs/6114/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6114/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6114/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: CONTRIBUTOR
user: login: SyncfusionBuild
created_at: 2025-04-14T03:44:07Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/console)**
author_association: CONTRIBUTOR
user: login: SyncfusionBuild
created_at: 2025-04-14T03:45:47Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/)<br/>Technical Error(s): 0<br/>Spelling Error(s): [6](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/artifact/cireports/spellcheck/spellcheckreport.htm)<br/>Image Alt Text Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6141/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: CONTRIBUTOR
user: login: SyncfusionBuild
created_at: 2025-04-28T07:28:29Z
body: **CI Status: FAILURE :x:<br/>Source Compilation: Not Started :x:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6453/)<br/>**
author_association: CONTRIBUTOR
user: login: SyncfusionBuild
created_at: 2025-04-28T07:30:01Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/console)**
author_association: CONTRIBUTOR
user: login: SyncfusionBuild
created_at: 2025-04-28T07:31:41Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/)<br/>Technical Error(s): 0<br/>Spelling Error(s): [6](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/artifact/cireports/spellcheck/spellcheckreport.htm)<br/>Image Alt Text Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6454/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: CONTRIBUTOR
user: login: SyncfusionBuild
created_at: 2025-05-07T09:03:37Z
body: **Build Status: INQUEUE :clock3:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/console)**
author_association: CONTRIBUTOR
user: login: SyncfusionBuild
created_at: 2025-05-07T09:05:16Z
body: **Build Status: INPROGRESS :arrows_clockwise:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/console)**
author_association: CONTRIBUTOR
user: login: SyncfusionBuild
created_at: 2025-05-07T09:19:26Z
body: **CI Status: SUCCESS :white_check_mark:<br/>Source Compilation: SUCCESS :white_check_mark:<br/>Build Location: [952312-complex-column](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/)<br/>Technical Error(s): 0<br/>Spelling Error(s): [6](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/artifact/cireports/spellcheck/spellcheckreport.htm)<br/>Image Alt Text Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/artifact/cireports/ImageValidation/AltTextValidation.html)<br/>Image Size Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/artifact/cireports/ImageValidation/ImageSizeValidation.html)<br/>Image Name Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/artifact/cireports/ImageValidation/ImageNameValidation.html)<br/>FT Layout Syntax Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/artifact/cireports/FTLayoutSyntaxValidation/FTStructureValidation.html)<br/>Front matter Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/artifact/cireports/FrontMatterValidation/FrontMatterValidation.html)<br/>File Path Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/artifact/cireports/FilePathValidation/FilePathValidation.html)<br/>CodeSnippet File Path Missing Error(s): [0](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/artifact/cireports/CodeSnippetFilePathValidation/CodeSnippetFilePathValidation.html)<br/>Toc Anchor Tags Validation Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/artifact/cireports/AnchorTagsValidation/AnchorTagsValidation.html)<br/>MD Tag Validation Error(s): [0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)](https://ci.syncfusion.com/job/Content/job/blazor-docs/6652/artifact/cireports/MDTagsValidation/MDTagsValidation.html)<br/>**
author_association: CONTRIBUTOR