diff --git a/blazor/datagrid/column-menu.md b/blazor/datagrid/column-menu.md
index 337db21e6d..cbf3c654e0 100644
--- a/blazor/datagrid/column-menu.md
+++ b/blazor/datagrid/column-menu.md
@@ -11,8 +11,6 @@ documentation: ug
The column menu in the Syncfusion Blazor Grid component provides options to enable features such as sorting, grouping, filtering, column chooser, and autofit. When users click on the column header’s menu icon, a menu will be displayed with these integrated features. To enable the column menu, you need to set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property to true in the Grid configuration.
-
-
The default menu items are displayed in the following table,
| Item | Description |
@@ -96,11 +94,87 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-> You can disable column menu for a particular column by defining the column's [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property as false.
-
You can customize the default menu items by defining the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ContextMenuItems) with the required items.
-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrUsijhhkfMyNWj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+> * You can disable column menu for a particular column by defining the column's [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property as false.
+> * You can customize the default menu items by defining the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ContextMenuItems) with the required items.
+
+## Prevent column menu for particular column
+
+The Syncfusion Blazor DataGrid component provides the ability to prevent the appearance of the column menu for specific columns. This feature is useful when you want to restrict certain columns from being customizable through the column menu.
+
+To prevent the column menu for a particular column, you can set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property to **false** for that specific column configuration. This will disable the column menu options specifically for the designated column, while other columns will have the column menu enabled.
+
+The following example demonstrates how to prevent the column menu for a specific column. In this example, the column menu is disabled for the **OrderID** column by setting the `showColumnMenu` property to **false**.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+
+ public OrderDetails(int OrderID, string CustomerId, string Shipcity, string Shipcountry, double Freight)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.ShipCity = Shipcity;
+ this.ShipCountry = Shipcountry;
+ this.Freight = Freight;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", "Reims", "France", 32.38));
+ order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Germany", 11.61));
+ order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Brazil", 65.83));
+ order.Add(new OrderDetails(10251, "VICTE", "Lyon", "France", 41.34));
+ order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Belgium", 51.3));
+ order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Brazil", 58.17));
+ order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Switzerland", 22.98));
+ order.Add(new OrderDetails(10255, "RICSU", "Genève", "Switzerland", 148.33));
+ order.Add(new OrderDetails(10256, "WELLI", "Resende", "Brazil", 13.97));
+ order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "Venezuela", 81.91));
+ order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Austria", 140.51));
+ order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Mexico", 3.25));
+ order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Germany", 55.09));
+ order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Brazil", 3.05));
+ order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "USA", 48.29));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public double Freight { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBfiCVHTnFFingT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
## Add custom column menu item
The custom column menu item feature allows you to add additional menu items to the column menu in the Syncfusion Grid. These custom menu items can be defined using the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property, which accepts a collection of [ColumnMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html) class.You can define the actions for these custom items in the [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event.
diff --git a/blazor/datagrid/foreignKey-column.md b/blazor/datagrid/foreignKey-column.md
index 67b3eafba1..840b8aaadf 100644
--- a/blazor/datagrid/foreignKey-column.md
+++ b/blazor/datagrid/foreignKey-column.md
@@ -28,116 +28,100 @@ In this example, data is the local data source for the Grid, and **Employee Name
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.DropDowns
-@using BlazorApp1.Data
-
-
+
-
-
-
-
+
+
+
+
@code {
- public List Orders { get; set; }
- public List Employees { get; set; }
+ public List Orders { get; set; }
+ public List Employees { get; set; }
protected override void OnInitialized()
{
- Orders = OrderData.GetAllRecords();
- Employees = EmployeeData.GetAllRecords();
+ Orders = OrderDetails.GetAllRecords();
+ Employees = EmployeeDetails.GetAllRecords();
}
}
{% endhighlight %}
-{% highlight c# tabtitle="OrderData.cs" %}
- public class EmployeeData
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string Shipcity, int EmployeeId, double Freight)
{
- public static List Employees = new List();
- public EmployeeData()
- {
-
- }
- public EmployeeData(int? employeeID, string firstName)
- {
- EmployeeID = employeeID;
- FirstName = firstName;
- }
- public static List GetAllRecords()
- {
- if (Employees.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Employees.Add(new EmployeeData( 1, "Nancy"));
- Employees.Add(new EmployeeData( 2, "Andrew"));
- Employees.Add(new EmployeeData( 3, "Janet"));
- Employees.Add(new EmployeeData( 4, "Nancy"));
- Employees.Add(new EmployeeData( 5, "Margaret"));
- Employees.Add(new EmployeeData( 6, "Steven"));
- Employees.Add(new EmployeeData( 7, "Janet"));
- Employees.Add(new EmployeeData( 8, "Andrew"));
- Employees.Add(new EmployeeData(9, "Nancy"));
- code += 5;
- }
- }
- return Employees;
- }
- public int? EmployeeID { get; set; }
- public string FirstName { get; set; }
+ this.OrderID = OrderID;
+ this.ShipCity = Shipcity;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
}
- public class OrderData
+ public static List GetAllRecords()
{
- public static List Orders = new List();
-
- public OrderData()
- {
-
- }
- public OrderData(int? OrderID, int? EmployeeID, string ShipCity, double? Freight)
- {
- this.OrderID = OrderID;
- this.EmployeeID = EmployeeID;
- this.ShipCity = ShipCity;
- this.Freight = Freight;
- }
- public static List GetAllRecords()
- {
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248,1, "Reims", 32.18));
- Orders.Add(new OrderData(10249,2, "Münster",33.33));
- Orders.Add(new OrderData(10250,3, "Rio de Janeiro",12.35));
- Orders.Add(new OrderData(10251,4, "Reims", 22.65));
- Orders.Add(new OrderData(10252,5, "Lyon", 63.43));
- Orders.Add(new OrderData(10253,6, "Charleroi",56.98));
- Orders.Add(new OrderData(10254,7, "Rio de Janeiro", 45.65));
- Orders.Add(new OrderData(10255,8, "Münster", 11.13));
- Orders.Add(new OrderData(10256,9, "Reims", 87.59));
- code += 5;
- }
- }
- return Orders;
- }
- public int? OrderID { get; set; }
- public int? EmployeeID { get; set; }
- public string ShipCity { get; set; }
- public double? Freight { get; set; }
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "Reims", 5, 32.38));
+ order.Add(new OrderDetails(10249, "Münster", 6, 11.61));
+ order.Add(new OrderDetails(10250, "Rio de Janeiro", 4, 65.83));
+ order.Add(new OrderDetails(10251, "Lyon", 3, 41.34));
+ order.Add(new OrderDetails(10252, "Charleroi", 4, 51.3));
+ order.Add(new OrderDetails(10253, "Rio de Janeiro", 3, 58.17));
+ order.Add(new OrderDetails(10254, "Bern", 5, 22.98));
+ order.Add(new OrderDetails(10255, "Genève", 9, 48.33));
+ order.Add(new OrderDetails(10256, "Resende", 3, 13.97));
+ order.Add(new OrderDetails(10257, "San Cristóbal", 4, 81.91));
+ order.Add(new OrderDetails(10258, "Graz", 1, 40.51));
+ order.Add(new OrderDetails(10259, "México D.F.", 4, 3.25));
+ order.Add(new OrderDetails(10260, "Köln", 4, 55.09));
+ order.Add(new OrderDetails(10261, "Rio de Janeiro", 4, 3.05));
+ order.Add(new OrderDetails(10262, "Albuquerque", 8, 48.29));
+ }
+ return order;
}
+ public int OrderID { get; set; }
+ public string ShipCity { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+}
+public class EmployeeDetails
+{
+ public static List employee = new List();
+ public EmployeeDetails(int employeeID, string firstName)
+ {
+ this.EmployeeID = employeeID;
+ this.FirstName = firstName;
+ }
+ public static List GetAllRecords()
+ {
+ if (employee.Count == 0)
+ {
+ employee.Add(new EmployeeDetails(1, "Nancy"));
+ employee.Add(new EmployeeDetails(2, "Andrew"));
+ employee.Add(new EmployeeDetails(3, "Janet"));
+ employee.Add(new EmployeeDetails(4, "Margaret"));
+ employee.Add(new EmployeeDetails(5, "Steven"));
+ employee.Add(new EmployeeDetails(6, "Michael"));
+ employee.Add(new EmployeeDetails(7, "Robert"));
+ employee.Add(new EmployeeDetails(8, "Laura"));
+ employee.Add(new EmployeeDetails(9, "Anne"));
+ }
+ return employee;
+ }
+ public int EmployeeID { get; set; }
+ public string FirstName { get; set; }
+}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrqNPVEApFgHAZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhTWhNzzhjrqtUe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Binding remote data
-The Foreign key column in Syncfusion Grid allows you to bind remote data for a foreign key column. You can use ```SfDataManager``` component instead of using ```DataSource``` property.
+The Foreign key column in Syncfusion Grid allows you to bind remote data for a foreign key column. You can use `SfDataManager` component instead of using `DataSource` property.
-This example demonstrates how to use the foreign key column with remote data binding using the ```ODataV4Adaptor``` in the grid:
+This example demonstrates how to use the foreign key column with remote data binding using the `ODataV4Adaptor` in the grid:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -145,80 +129,75 @@ This example demonstrates how to use the foreign key column with remote data bin
-
-
+
+
-
-
+
+
@code {
- public List Orders { get; set; }
+ public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = OrderData.GetAllRecords();
+ Orders = OrderDetails.GetAllRecords();
}
}
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
- public class EmployeeData
+public class EmployeeData
{
public static List Employees = new List();
public EmployeeData()
{
-
- }
-
- public int? EmployeeID { get; set; }
+ }
+ public int EmployeeID { get; set; }
public string FirstName { get; set; }
}
- public class OrderData
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string Shipcity, int EmployeeId, double Freight)
{
- public static List Orders = new List();
-
- public OrderData()
- {
-
- }
- public OrderData(int? OrderID, int? EmployeeID, string ShipCity, double? Freight)
- {
- this.OrderID = OrderID;
- this.EmployeeID = EmployeeID;
- this.ShipCity = ShipCity;
- this.Freight = Freight;
- }
- public static List GetAllRecords()
- {
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, 1, "Reims", 32.18));
- Orders.Add(new OrderData(10249, 2, "Münster", 33.33));
- Orders.Add(new OrderData(10250, 3, "Rio de Janeiro", 12.35));
- Orders.Add(new OrderData(10251, 4, "Reims", 22.65));
- Orders.Add(new OrderData(10252, 5, "Lyon", 63.43));
- Orders.Add(new OrderData(10253, 6, "Charleroi", 56.98));
- Orders.Add(new OrderData(10254, 7, "Rio de Janeiro", 45.65));
- Orders.Add(new OrderData(10255, 8, "Münster", 11.13));
- Orders.Add(new OrderData(10256, 9, "Reims", 87.59));
- code += 5;
- }
- }
- return Orders;
- }
- public int? OrderID { get; set; }
- public int? EmployeeID { get; set; }
- public string ShipCity { get; set; }
- public double? Freight { get; set; }
+ this.OrderID = OrderID;
+ this.ShipCity = Shipcity;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
}
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "Reims", 5, 32.38));
+ order.Add(new OrderDetails(10249, "Münster", 6, 11.61));
+ order.Add(new OrderDetails(10250, "Rio de Janeiro", 4, 65.83));
+ order.Add(new OrderDetails(10251, "Lyon", 3, 41.34));
+ order.Add(new OrderDetails(10252, "Charleroi", 4, 51.3));
+ order.Add(new OrderDetails(10253, "Rio de Janeiro", 3, 58.17));
+ order.Add(new OrderDetails(10254, "Bern", 5, 22.98));
+ order.Add(new OrderDetails(10255, "Genève", 9, 48.33));
+ order.Add(new OrderDetails(10256, "Resende", 3, 13.97));
+ order.Add(new OrderDetails(10257, "San Cristóbal", 4, 81.91));
+ order.Add(new OrderDetails(10258, "Graz", 1, 40.51));
+ order.Add(new OrderDetails(10259, "México D.F.", 4, 3.25));
+ order.Add(new OrderDetails(10260, "Köln", 4, 55.09));
+ order.Add(new OrderDetails(10261, "Rio de Janeiro", 4, 3.05));
+ order.Add(new OrderDetails(10262, "Albuquerque", 8, 48.29));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string ShipCity { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+}
{% endhighlight %}
{% endtabs %}
- {% previewsample "https://blazorplayground.syncfusion.com/embed/LjrJXMWBgWWmRbjx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+
> * For remote data, the sorting and grouping is done based on [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) instead of [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue).
> * If [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) is not defined, then the column uses [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of **GridColumn** tag helper.
@@ -233,7 +212,6 @@ In the following code example, the Employee Name is a foreign key column. When e
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
-@using BlazorApp1.Data
@@ -247,7 +225,7 @@ In the following code example, the Employee Name is a foreign key column. When e
-
+
@code {
@@ -355,116 +333,102 @@ In this example, a DropDownList component is rendered as the filter UI for the *
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
-@using BlazorApp1.Data
-
-
+
-
-
+
+
-
-
+
+
@code {
- public List Orders { get; set; }
- public List Employees { get; set; }
+ public List Orders { get; set; }
+ public List Employees { get; set; }
protected override void OnInitialized()
{
- Orders = OrderData.GetAllRecords();
- Employees = EmployeeData.GetAllRecords();
+ Orders = OrderDetails.GetAllRecords();
+ Employees = EmployeeDetails.GetAllRecords();
}
}
{% endhighlight %}
-{% highlight c# tabtitle="OrderData.cs" %}
- public class EmployeeData
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string Shipcity, int EmployeeId, double Freight)
{
- public static List Employees = new List();
- public EmployeeData()
- {
+ this.OrderID = OrderID;
+ this.ShipCity = Shipcity;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
- }
- public EmployeeData(int? employeeID, string firstName)
- {
- EmployeeID = employeeID;
- FirstName = firstName;
- }
- public static List GetAllRecords()
- {
- if (Employees.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Employees.Add(new EmployeeData(1, "Nancy"));
- Employees.Add(new EmployeeData(2, "Andrew"));
- Employees.Add(new EmployeeData(3, "Janet"));
- Employees.Add(new EmployeeData(4, "Nancy"));
- Employees.Add(new EmployeeData(5, "Margaret"));
- Employees.Add(new EmployeeData(6, "Steven"));
- Employees.Add(new EmployeeData(7, "Janet"));
- Employees.Add(new EmployeeData(8, "Andrew"));
- Employees.Add(new EmployeeData(9, "Nancy"));
- code += 5;
- }
- }
- return Employees;
- }
- public int? EmployeeID { get; set; }
- public string FirstName { get; set; }
}
- public class OrderData
+ public static List GetAllRecords()
{
- public static List Orders = new List();
-
- public OrderData()
- {
-
- }
- public OrderData(int? OrderID, int? EmployeeID, string ShipCity, double? Freight)
- {
- this.OrderID = OrderID;
- this.EmployeeID = EmployeeID;
- this.ShipCity = ShipCity;
- this.Freight = Freight;
- }
- public static List GetAllRecords()
- {
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, 1, "Reims", 32.18));
- Orders.Add(new OrderData(10249, 2, "Münster", 33.33));
- Orders.Add(new OrderData(10250, 3, "Rio de Janeiro", 12.35));
- Orders.Add(new OrderData(10251, 4, "Reims", 22.65));
- Orders.Add(new OrderData(10252, 5, "Lyon", 63.43));
- Orders.Add(new OrderData(10253, 6, "Charleroi", 56.98));
- Orders.Add(new OrderData(10254, 7, "Rio de Janeiro", 45.65));
- Orders.Add(new OrderData(10255, 8, "Münster", 11.13));
- Orders.Add(new OrderData(10256, 9, "Reims", 87.59));
- code += 5;
- }
- }
- return Orders;
- }
- public int? OrderID { get; set; }
- public int? EmployeeID { get; set; }
- public string ShipCity { get; set; }
- public double? Freight { get; set; }
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "Reims", 5, 32.38));
+ order.Add(new OrderDetails(10249, "Münster", 6, 11.61));
+ order.Add(new OrderDetails(10250, "Rio de Janeiro", 4, 65.83));
+ order.Add(new OrderDetails(10251, "Lyon", 3, 41.34));
+ order.Add(new OrderDetails(10252, "Charleroi", 4, 51.3));
+ order.Add(new OrderDetails(10253, "Rio de Janeiro", 3, 58.17));
+ order.Add(new OrderDetails(10254, "Bern", 5, 22.98));
+ order.Add(new OrderDetails(10255, "Genève", 9, 48.33));
+ order.Add(new OrderDetails(10256, "Resende", 3, 13.97));
+ order.Add(new OrderDetails(10257, "San Cristóbal", 4, 81.91));
+ order.Add(new OrderDetails(10258, "Graz", 1, 40.51));
+ order.Add(new OrderDetails(10259, "México D.F.", 4, 3.25));
+ order.Add(new OrderDetails(10260, "Köln", 4, 55.09));
+ order.Add(new OrderDetails(10261, "Rio de Janeiro", 4, 3.05));
+ order.Add(new OrderDetails(10262, "Albuquerque", 8, 48.29));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string ShipCity { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+}
+public class EmployeeDetails
+{
+ public static List employee = new List();
+ public EmployeeDetails(int employeeID, string firstName)
+ {
+ this.EmployeeID = employeeID;
+ this.FirstName = firstName;
}
+ public static List GetAllRecords()
+ {
+ if (employee.Count == 0)
+ {
+ employee.Add(new EmployeeDetails(1, "Nancy"));
+ employee.Add(new EmployeeDetails(2, "Andrew"));
+ employee.Add(new EmployeeDetails(3, "Janet"));
+ employee.Add(new EmployeeDetails(4, "Margaret"));
+ employee.Add(new EmployeeDetails(5, "Steven"));
+ employee.Add(new EmployeeDetails(6, "Michael"));
+ employee.Add(new EmployeeDetails(7, "Robert"));
+ employee.Add(new EmployeeDetails(8, "Laura"));
+ employee.Add(new EmployeeDetails(9, "Anne"));
+ }
+ return employee;
+ }
+ public int EmployeeID { get; set; }
+ public string FirstName { get; set; }
+}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqWMXHAlMwnaCg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVTMLDyAzdAAcbt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
> [View Sample in GitHub.](https://github.com/SyncfusionExamples/blazor-datagrid-customize-filter-ui-in-foreignkey-column)
@@ -478,139 +442,262 @@ In this example, the “EmployeeID” column is a foreign key column, and the fi
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
-@using BlazorApp1.Data
-
-
+
+
-
-
+
+
-
-
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
- public List Employees { get; set; }
-
+ private SfGrid Grid;
+ public List Orders { get; set; }
+ public List Employees { get; set; }
protected override void OnInitialized()
{
- Orders = OrderData.GetAllRecords();
- Employees = EmployeeData.GetAllRecords();
+ Orders = OrderDetails.GetAllRecords();
+ Employees = EmployeeDetails.GetAllRecords();
}
- public void Change(@Syncfusion.Blazor.DropDowns.ChangeEventArgs args)
- {
- if (args.Value == "All")
+ public async Task Change(@Syncfusion.Blazor.DropDowns.ChangeEventArgs args)
+ {
+ if (args.Value == "All" || args.Value == null)
{
- Grid.ClearFilteringAsync();
- Grid.RefreshAsync();
+ await Grid.ClearFilteringAsync();
}
else
{
- Grid.FilterByColumnAsync("EmployeeID", "contains", args.Value);
+ await Grid.FilterByColumnAsync("EmployeeID", "contains", args.Value);
}
}
- List Dropdown = new List
+ public class DropDownOrder
+ {
+ public string FirstName { get; set; }
+ }
+ List DropDownData = new List
{
- new EmployeeData() { FirstName= "All" },
- new EmployeeData() { FirstName= "Andrew" },
- new EmployeeData() { FirstName= "Janet" },
- new EmployeeData() { FirstName= "Margaret" },
- new EmployeeData() { FirstName= "Steven" },
+ new DropDownOrder() { FirstName = "All" },
+ new DropDownOrder() { FirstName = "Nancy" },
+ new DropDownOrder() { FirstName = "Janet" },
+ new DropDownOrder() { FirstName = "Margaret" },
+ new DropDownOrder() { FirstName = "Steven" },
+ new DropDownOrder() { FirstName = "Michael" },
+ new DropDownOrder() { FirstName = "Laura" },
+ new DropDownOrder() { FirstName = "Anne" },
};
}
{% endhighlight %}
-{% highlight c# tabtitle="OrderData.cs" %}
- public class EmployeeData
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string Shipcity, int EmployeeId, double Freight)
{
- public static List Employees = new List();
- public EmployeeData()
- {
+ this.OrderID = OrderID;
+ this.ShipCity = Shipcity;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "Reims", 5, 32.38));
+ order.Add(new OrderDetails(10249, "Münster", 6, 11.61));
+ order.Add(new OrderDetails(10250, "Rio de Janeiro", 4, 65.83));
+ order.Add(new OrderDetails(10251, "Lyon", 3, 41.34));
+ order.Add(new OrderDetails(10252, "Charleroi", 4, 51.3));
+ order.Add(new OrderDetails(10253, "Rio de Janeiro", 3, 58.17));
+ order.Add(new OrderDetails(10254, "Bern", 5, 22.98));
+ order.Add(new OrderDetails(10255, "Genève", 9, 48.33));
+ order.Add(new OrderDetails(10256, "Resende", 3, 13.97));
+ order.Add(new OrderDetails(10257, "San Cristóbal", 4, 81.91));
+ order.Add(new OrderDetails(10258, "Graz", 1, 40.51));
+ order.Add(new OrderDetails(10259, "México D.F.", 4, 3.25));
+ order.Add(new OrderDetails(10260, "Köln", 4, 55.09));
+ order.Add(new OrderDetails(10261, "Rio de Janeiro", 4, 3.05));
+ order.Add(new OrderDetails(10262, "Albuquerque", 8, 48.29));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string ShipCity { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+}
+public class EmployeeDetails
+{
+ public static List employee = new List();
+ public EmployeeDetails(int employeeID, string firstName)
+ {
+ this.EmployeeID = employeeID;
+ this.FirstName = firstName;
+ }
+ public static List GetAllRecords()
+ {
+ if (employee.Count == 0)
+ {
+ employee.Add(new EmployeeDetails(1, "Nancy"));
+ employee.Add(new EmployeeDetails(2, "Andrew"));
+ employee.Add(new EmployeeDetails(3, "Janet"));
+ employee.Add(new EmployeeDetails(4, "Margaret"));
+ employee.Add(new EmployeeDetails(5, "Steven"));
+ employee.Add(new EmployeeDetails(6, "Michael"));
+ employee.Add(new EmployeeDetails(7, "Robert"));
+ employee.Add(new EmployeeDetails(8, "Laura"));
+ employee.Add(new EmployeeDetails(9, "Anne"));
+ }
+ return employee;
+ }
+ public int EmployeeID { get; set; }
+ public string FirstName { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
- }
- public EmployeeData(int? employeeID, string firstName)
- {
- EmployeeID = employeeID;
- FirstName = firstName;
- }
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBAiiZngvqDDFvZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
- public static List GetAllRecords()
- {
- if (Employees.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Employees.Add(new EmployeeData( 1, "Nancy"));
- Employees.Add(new EmployeeData( 2, "Andrew"));
- Employees.Add(new EmployeeData( 3, "Janet"));
- Employees.Add(new EmployeeData( 4, "Nancy"));
- Employees.Add(new EmployeeData( 5, "Margaret"));
- Employees.Add(new EmployeeData( 6, "Steven"));
- Employees.Add(new EmployeeData( 7, "Janet"));
- Employees.Add(new EmployeeData( 8, "Andrew"));
- Employees.Add(new EmployeeData(9, "Nancy"));
- code += 5;
- }
- }
- return Employees;
- }
- public int? EmployeeID { get; set; }
- public string FirstName { get; set; }
+## Perform aggregation in foreign key column
+
+By default, aggregations are not supported in a foreign key column in the Syncfusion DataGrid. However, you can achieve aggregation for a foreign key column by using `customAggregate`.
+
+To perform aggregation in a foreign key column, follow these steps:
+
+1. Define a foreign key column in the Grid.
+2. Implement a custom aggregate function to calculate the aggregation for the foreign key column.
+3. Set the `customAggregate` property of the column to the custom aggregate function.
+
+Here's an example that demonstrates how to perform aggregation in a foreign key column:
+
+In the provided example, the `customAggregateFn` function is used to filter and count the **Margaret** data based on the **FirstName** field of the foreign key column. The result is displayed in the DataGrid's footer template using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate) property.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+ Count of Margaret: @CustomAggregateFn()
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List OrderData { get; set; }
+ public List EmployeeData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ EmployeeData = EmployeeDetails.GetAllRecords();
}
- public class OrderData
+
+ private int CustomAggregateFn()
{
- public static List Orders = new List();
-
- public OrderData()
- {
+ var Count= OrderData.Count(order => EmployeeData
+ .FirstOrDefault(data => data.EmployeeID == order.EmployeeID)?.FirstName == "Margaret");
+ return Count;
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+
+ public OrderDetails(int OrderID, string Shipcity, int EmployeeId, double Freight)
+ {
+ this.OrderID = OrderID;
+ this.ShipCity = Shipcity;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
- }
- public OrderData(int? OrderID, int? EmployeeID, string ShipCity, double? Freight)
- {
- this.OrderID = OrderID;
- this.EmployeeID = EmployeeID;
- this.ShipCity = ShipCity;
- this.Freight = Freight;
- }
- public static List GetAllRecords()
- {
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248,1, "Reims", 32.18));
- Orders.Add(new OrderData(10249,2, "Münster",33.33));
- Orders.Add(new OrderData(10250,3, "Rio de Janeiro",12.35));
- Orders.Add(new OrderData(10251,4, "Reims", 22.65));
- Orders.Add(new OrderData(10252,5, "Lyon", 63.43));
- Orders.Add(new OrderData(10253,6, "Charleroi",56.98));
- Orders.Add(new OrderData(10254,7, "Rio de Janeiro", 45.65));
- Orders.Add(new OrderData(10255,8, "Münster", 11.13));
- Orders.Add(new OrderData(10256,9, "Reims", 87.59));
- code += 5;
- }
- }
- return Orders;
- }
- public int? OrderID { get; set; }
- public int? EmployeeID { get; set; }
- public string ShipCity { get; set; }
- public double? Freight { get; set; }
}
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "Reims", 5, 32.38));
+ order.Add(new OrderDetails(10249, "Münster", 6, 11.61));
+ order.Add(new OrderDetails(10250, "Rio de Janeiro", 4, 65.83));
+ order.Add(new OrderDetails(10251, "Lyon", 3, 41.34));
+ order.Add(new OrderDetails(10252, "Charleroi", 4, 51.3));
+ order.Add(new OrderDetails(10253, "Rio de Janeiro", 3, 58.17));
+ order.Add(new OrderDetails(10254, "Bern", 5, 22.98));
+ order.Add(new OrderDetails(10255, "Genève", 9, 48.33));
+ order.Add(new OrderDetails(10256, "Resende", 3, 13.97));
+ order.Add(new OrderDetails(10257, "San Cristóbal", 4, 81.91));
+ order.Add(new OrderDetails(10258, "Graz", 1, 40.51));
+ order.Add(new OrderDetails(10259, "México D.F.", 4, 3.25));
+ order.Add(new OrderDetails(10260, "Köln", 4, 55.09));
+ order.Add(new OrderDetails(10261, "Rio de Janeiro", 4, 3.05));
+ order.Add(new OrderDetails(10262, "Albuquerque", 8, 48.29));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string ShipCity { get; set; }
+ public int EmployeeID { get; set; }
+ public double Freight { get; set; }
+}
+public class EmployeeDetails
+{
+ public static List employee = new List();
+
+ public EmployeeDetails() { }
+
+ public EmployeeDetails(int employeeID, string lastName, string firstName)
+ {
+ this.EmployeeID = employeeID;
+ this.LastName = lastName;
+ this.FirstName = firstName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (employee.Count == 0)
+ {
+ employee.Add(new EmployeeDetails(1, "Davolio", "Nancy"));
+ employee.Add(new EmployeeDetails(2, "Fuller", "Andrew"));
+ employee.Add(new EmployeeDetails(3, "Leverling", "Janet"));
+ employee.Add(new EmployeeDetails(4, "Peacock", "Margaret"));
+ employee.Add(new EmployeeDetails(5, "Buchanan", "Steven"));
+ employee.Add(new EmployeeDetails(6, "Suyama", "Michael"));
+ employee.Add(new EmployeeDetails(7, "King", "Robert"));
+ employee.Add(new EmployeeDetails(8, "Callahan", "Laura"));
+ employee.Add(new EmployeeDetails(9, "Dodsworth", "Anne"));
+ }
+ return employee;
+ }
+
+ public int EmployeeID { get; set; }
+ public string LastName { get; set; }
+ public string FirstName { get; set; }
+}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBAiiZngvqDDFvZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVzisLyKJzudYVg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Prevent filter query generation for foreignkey column
@@ -694,151 +781,134 @@ In the following example, Employee Name and Ship City are foreign key columns th
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@using BlazorApp1.Data
-
-
-
-
+
+
+
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
- public List Countries { get; set; }
- public List Employees { get; set; }
-
+ public List Orders { get; set; }
+ public List Countries { get; set; }
+ public List Employees { get; set; }
protected override void OnInitialized()
{
- Orders = OrderData.GetAllRecords();
- Employees = EmployeeData.GetAllRecords();
- Countries = ShipCountry.GetAllRecords();
+ Orders = OrderDetails.GetAllRecords();
+ Employees = EmployeeDetails.GetAllRecords();
+ Countries = CountryDetails.GetAllRecords();
}
}
{% endhighlight %}
-{% highlight c# tabtitle="OrderData.cs" %}
- public class ShipCountry
- {
- public static List Countries = new List();
- public ShipCountry()
- {
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
- }
- public ShipCountry(int? shipID, string shipCity)
- {
- ShipID = shipID;
- ShipCity = shipCity;
- }
- public static List GetAllRecords()
- {
- if (Countries.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Countries.Add(new ShipCountry(1, "US"));
- Countries.Add(new ShipCountry(2, "France"));
- Countries.Add(new ShipCountry(3, "UK"));
- Countries.Add(new ShipCountry(4, "Italy"));
- Countries.Add(new ShipCountry(5, "Australia"));
- Countries.Add(new ShipCountry(6, "Australia"));
- Countries.Add(new ShipCountry(7, "UK"));
- Countries.Add(new ShipCountry(8, "Andrew"));
- Countries.Add(new ShipCountry(9, "UK"));
- code += 5;
- }
- }
- return Countries;
- }
- public int? ShipID { get; set; }
- public string ShipCity { get; set; }
+ public OrderDetails(int OrderID, string CustomerId, int EmployeeId, string Shipcountry, double Freight)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.ShipCountry = Shipcountry;
+ this.Freight = Freight;
}
- public class EmployeeData
+ public static List GetAllRecords()
{
- public static List Employees = new List();
- public EmployeeData()
- {
-
- }
- public EmployeeData(int? employeeID, string firstName)
- {
- EmployeeID = employeeID;
- FirstName = firstName;
- }
-
- public static List GetAllRecords()
- {
- if (Employees.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Employees.Add(new EmployeeData( 1, "Nancy"));
- Employees.Add(new EmployeeData( 2, "Andrew"));
- Employees.Add(new EmployeeData( 3, "Janet"));
- Employees.Add(new EmployeeData( 4, "Nancy"));
- Employees.Add(new EmployeeData( 5, "Margaret"));
- Employees.Add(new EmployeeData( 6, "Steven"));
- Employees.Add(new EmployeeData( 7, "Janet"));
- Employees.Add(new EmployeeData( 8, "Andrew"));
- Employees.Add(new EmployeeData(9, "Nancy"));
- code += 5;
- }
- }
- return Employees;
- }
- public int? EmployeeID { get; set; }
- public string FirstName { get; set; }
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", 5, "France", 32.38));
+ order.Add(new OrderDetails(10249, "TOMSP", 6, "Germany", 11.61));
+ order.Add(new OrderDetails(10250, "HANAR", 4, "Brazil", 65.83));
+ order.Add(new OrderDetails(10251, "VICTE", 3, "France", 41.34));
+ order.Add(new OrderDetails(10252, "SUPRD", 4, "Belgium", 51.3));
+ order.Add(new OrderDetails(10253, "HANAR", 3, "Brazil", 58.17));
+ order.Add(new OrderDetails(10254, "CHOPS", 5, "Switzerland", 22.98));
+ order.Add(new OrderDetails(10255, "RICSU", 9, "Switzerland", 148.33));
+ order.Add(new OrderDetails(10256, "WELLI", 3, "Brazil", 13.97));
+ order.Add(new OrderDetails(10257, "HILAA", 4, "Venezuela", 81.91));
+ order.Add(new OrderDetails(10258, "ERNSH", 1, "Austria", 140.51));
+ order.Add(new OrderDetails(10259, "CENTC", 4, "Mexico", 3.25));
+ order.Add(new OrderDetails(10260, "OTTIK", 4, "Germany", 55.09));
+ order.Add(new OrderDetails(10261, "QUEDE", 4, "Brazil", 3.05));
+ order.Add(new OrderDetails(10262, "RATTC", 8, "USA", 48.29));
+ }
+ return order;
}
- public class OrderData
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public string ShipCountry { get; set; }
+ public double Freight { get; set; }
+}
+public class CountryDetails
+{
+ public static List country = new List();
+ public CountryDetails(int employeeID, string city)
{
- public static List Orders = new List();
-
-
- public OrderData()
- {
-
- }
- public OrderData(int? OrderID, int? EmployeeID, int? ShipID, double? Freight)
- {
- this.OrderID = OrderID;
- this.EmployeeID = EmployeeID;
- this.ShipID = ShipID;
- this.Freight = Freight;
- }
- public static List GetAllRecords()
- {
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248,1, 1, 32.18));
- Orders.Add(new OrderData(10249,2, 2,33.33));
- Orders.Add(new OrderData(10250,3, 3,12.35));
- Orders.Add(new OrderData(10251,4, 4, 22.65));
- Orders.Add(new OrderData(10252,5, 5, 63.43));
- Orders.Add(new OrderData(10253,6, 6,56.98));
- Orders.Add(new OrderData(10254,7, 7, 45.65));
- Orders.Add(new OrderData(10255,8, 8, 11.13));
- Orders.Add(new OrderData(10256,9, 9, 87.59));
- code += 5;
- }
- }
- return Orders;
- }
- public int? OrderID { get; set; }
- public int? EmployeeID { get; set; }
- public int? ShipID { get; set; }
- public double? Freight { get; set; }
- }
+ this.EmployeeID = employeeID;
+ this.City = city;
+ }
+ public static List GetAllRecords()
+ {
+ if (country.Count == 0)
+ {
+ country.Add(new CountryDetails(1, "Kirkland"));
+ country.Add(new CountryDetails(2, "London"));
+ country.Add(new CountryDetails(3, "Seattle"));
+ country.Add(new CountryDetails(4, "London"));
+ country.Add(new CountryDetails(5, "Tacoma"));
+ country.Add(new CountryDetails(6, "Redmond"));
+ country.Add(new CountryDetails(7, "London"));
+ country.Add(new CountryDetails(8, "London"));
+ country.Add(new CountryDetails(9, "Seattle"));
+ }
+ return country;
+ }
+ public int EmployeeID { get; set; }
+ public string City { get; set; }
+}
+public class EmployeeDetails
+{
+ public static List employee = new List();
+ public EmployeeDetails(string customerId, string customerName)
+ {
+ this.CustomerID = customerId;
+ this.CustomerName = customerName;
+ }
+ public static List GetAllRecords()
+ {
+ if (employee.Count == 0)
+ {
+ employee.Add(new EmployeeDetails("VINET", "Paul Henriot"));
+ employee.Add(new EmployeeDetails("TOMSP", "Karin Josephs"));
+ employee.Add(new EmployeeDetails("HANAR", "Mario Pontes"));
+ employee.Add(new EmployeeDetails("VICTE", "Mary Saveley"));
+ employee.Add(new EmployeeDetails("SUPRD", "Pascale Cartrain"));
+ employee.Add(new EmployeeDetails("HANAR", "Mario Pontes"));
+ employee.Add(new EmployeeDetails("CHOPS", "Yang Wang"));
+ employee.Add(new EmployeeDetails("RICSU", "Michael Holz"));
+ employee.Add(new EmployeeDetails("WELLI", "Paula Parente"));
+ employee.Add(new EmployeeDetails("HILAA", "Carlos Hernández"));
+ employee.Add(new EmployeeDetails("ERNSH", "Roland Mendel"));
+ employee.Add(new EmployeeDetails("CENTC", "Francisco Chang"));
+ employee.Add(new EmployeeDetails("OTTIK", "Henriette Pfalzheim"));
+ employee.Add(new EmployeeDetails("QUEDE", "Bernardo Batista"));
+ employee.Add(new EmployeeDetails("RATTC", "Paula Wilson"));
+ }
+ return employee;
+ }
+ public string CustomerID { get; set; }
+ public string CustomerName { get; set; }
+}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLUsWDnKvoInklv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLTirNeJykKOSmV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-prevent-query-generation-for-foriegnkey-column).
diff --git a/blazor/datagrid/images/foreignkey-remote-data.png b/blazor/datagrid/images/foreignkey-remote-data.png
new file mode 100644
index 0000000000..83ef95b683
Binary files /dev/null and b/blazor/datagrid/images/foreignkey-remote-data.png differ