From 2c9c3f8ee6708dd779b5f0f58044e677268d7042 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Fri, 11 Apr 2025 11:08:22 +0530 Subject: [PATCH 1/5] 952312: Added the topic of How to set complex column as foreign key column --- blazor/datagrid/column-rendering.md | 60 +++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/blazor/datagrid/column-rendering.md b/blazor/datagrid/column-rendering.md index 824a188a87..f260d4eb59 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 set complex columns as foreign key columns. This allows you to display related data from a foreign data source based on the complex column value. + +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. + +{% 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 From 4a3c1b88b72fb430e9101ed341d4c301d255fb13 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Fri, 11 Apr 2025 11:38:48 +0530 Subject: [PATCH 2/5] 952312: Changed the content --- blazor/datagrid/column-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/datagrid/column-rendering.md b/blazor/datagrid/column-rendering.md index f260d4eb59..3e1dd020e1 100644 --- a/blazor/datagrid/column-rendering.md +++ b/blazor/datagrid/column-rendering.md @@ -707,9 +707,9 @@ Before proceeding this, learn about [DynamicObject Binding](https://blazor.syncf ### How to set complex column as foreign key column -The Syncfusion Blazor DataGrid provides the ability to set complex columns as foreign key columns. This allows you to display related data from a foreign data source based on the complex column value. +The Syncfusion Blazor DataGrid component 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. +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" %} From e5802805802afa6e4d72e7781009fbe897ada877 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Mon, 14 Apr 2025 09:12:56 +0530 Subject: [PATCH 3/5] 952312: Added the topic of Render RadioButton in a column and Render foreign key value in column template --- blazor/datagrid/column-template.md | 62 +++++++++++++++++++ blazor/datagrid/foreignKey-column.md | 92 ++++++++++++++++++++++++++++ 2 files changed, 154 insertions(+) diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md index 5f6e5489e0..723b2cfe48 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -564,6 +564,68 @@ 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. + +``` + + + +``` + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using System.Dynamic +@using Syncfusion.Blazor.Buttons + + + + + + + + + + + + +@code { + public List Orders { get; set; } + protected override void OnInitialized() + { + Orders = Enumerable.Range(1, 75).Select(x => new Order() + { + OrderID = 1000 + x, + CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], + Freight = (new int[] { 0, 1, 2 })[new Random().Next(3)], + + }).ToList(); + } + public class Order + { + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public int? Freight { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLSDJssBIUUAdCw?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..c9490f6bdc 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 Blazor DataGrid: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@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/BDrItpiWpAQSwTsg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Enable multiple foreign key columns From c53272f28edb8990bef9608aa18392ef0f48b7d1 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Mon, 28 Apr 2025 12:57:21 +0530 Subject: [PATCH 4/5] 952312: Removed the component. --- blazor/datagrid/column-rendering.md | 2 +- blazor/datagrid/column-template.md | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/blazor/datagrid/column-rendering.md b/blazor/datagrid/column-rendering.md index 3e1dd020e1..5b9994ea73 100644 --- a/blazor/datagrid/column-rendering.md +++ b/blazor/datagrid/column-rendering.md @@ -707,7 +707,7 @@ Before proceeding this, learn about [DynamicObject Binding](https://blazor.syncf ### How to set complex column as foreign key column -The Syncfusion Blazor DataGrid component 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 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. diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md index 723b2cfe48..caf06e1248 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -610,7 +610,6 @@ In the following example, a `RadioButton` is rendered in the **Order Status** co OrderID = 1000 + x, CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = (new int[] { 0, 1, 2 })[new Random().Next(3)], - }).ToList(); } public class Order From 1d86a7baebd88c3418a3ea4faaec7e68d23210cf Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Wed, 7 May 2025 14:32:36 +0530 Subject: [PATCH 5/5] 952312: Modified the provided changes --- blazor/datagrid/column-template.md | 75 ++++++++++++++++++---------- blazor/datagrid/foreignKey-column.md | 6 +-- 2 files changed, 51 insertions(+), 30 deletions(-) diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md index caf06e1248..07830ba0be 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -568,62 +568,83 @@ public class OrderDetails 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. +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 System.Dynamic @using Syncfusion.Blazor.Buttons - + - - - - + + + @code { - public List Orders { get; set; } + public List OrderData { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = (new int[] { 0, 1, 2 })[new Random().Next(3)], - }).ToList(); + 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 class Order + public static List GetAllRecords() { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public int? Freight { get; set; } + 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/hDLSDJssBIUUAdCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZheXoNwgrBgAFeR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Using condition template diff --git a/blazor/datagrid/foreignKey-column.md b/blazor/datagrid/foreignKey-column.md index c9490f6bdc..1196489664 100644 --- a/blazor/datagrid/foreignKey-column.md +++ b/blazor/datagrid/foreignKey-column.md @@ -766,7 +766,7 @@ The Syncfusion Blazor DataGrid supports rendering foreign key values within a co 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: +The following example demonstrates how to render a foreign key value using a column template in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -781,7 +781,7 @@ The following example demonstrates how to render a foreign key value using a col var order = (OrderData)data; var emp = Employees.FirstOrDefault(e => e.EmployeeID == order.EmployeeID); } - @emp?.FirstName + @emp?.FirstName @@ -851,7 +851,7 @@ The following example demonstrates how to render a foreign key value using a col {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrItpiWpAQSwTsg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrSDojmVniWmsTS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Enable multiple foreign key columns