From 3e58897fa4d820a3b32d1d0280aadc3d26ef9391 Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Fri, 6 Dec 2024 11:32:34 +0530 Subject: [PATCH 1/7] 926395: Revamped foreign column documentation in hotfix --- blazor/datagrid/column-headers.md | 2 +- blazor/datagrid/column-menu.md | 84 ++- blazor/datagrid/column-template.md | 2 +- blazor/datagrid/foreignKey-column.md | 984 ++++++++++++++------------- 4 files changed, 607 insertions(+), 465 deletions(-) diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md index 01180e4f9b..4218cedc19 100644 --- a/blazor/datagrid/column-headers.md +++ b/blazor/datagrid/column-headers.md @@ -444,7 +444,7 @@ DataGrid provides the below three options for configuring: > * If a column's header text contains no white space, the text may not be wrapped. > * If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) and [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) properties of the column to customize the appearance of the header and cell content. -In the following example, the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTextWrapSettings.html#Syncfusion_Blazor_Grids_GridTextWrapSettings_WrapMode) is set to **Content**. +The following example demonstrates how to dynamically change the auto-wrap of the header text based on DropDown change. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/column-menu.md b/blazor/datagrid/column-menu.md index 65eea08e3f..c5b381ca72 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/column-template.md b/blazor/datagrid/column-template.md index 471ea72333..f5af8595c4 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -395,7 +395,7 @@ public class OrderDetails ### Render Chip component in a column -The DataGrid component provides support for rendering [Chips](https://blazor.syncfusion.com/documentation/color-picker/getting-started-with-web-app) component in 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 useful when displaying data that requires a chip component to be rendered in a column. +The DataGrid component provides support for rendering [Chips](https://blazor.syncfusion.com/documentation/chip/getting-started-with-web-app) component in 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 useful when displaying data that requires a chip component to be rendered in a column. In the following code, we rendered the Chips component in the Grid **First Name** column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. diff --git a/blazor/datagrid/foreignKey-column.md b/blazor/datagrid/foreignKey-column.md index 6a9ff2aa09..737349bf00 100644 --- a/blazor/datagrid/foreignKey-column.md +++ b/blazor/datagrid/foreignKey-column.md @@ -9,7 +9,7 @@ documentation: ug # Foreign key column in Blazor DataGrid component -The Foreign key column in the Syncfusion® Grid component allows you to display related data from a foreign key data source in a column within the grid. This feature is particularly useful when you have a column in the grid that represents a foreign key relationship with another data source. +The Foreign key column in the Syncfusion Grid component allows you to display related data from a foreign key data source in a column within the grid. This feature is particularly useful when you have a column in the grid that represents a foreign key relationship with another data source. Foreign key column can be enabled by using [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html), [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) and [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) properties of **GridForeignColumn** directive. @@ -21,123 +21,107 @@ Define the foreign key column in the grid using the following properties: ## Binding local data -The Syncfusion® Grid component provides a convenient way to bind local data to a foreign key column. This allows you to display related data from a local data source within the grid. Here’s an example of how to bind local data to a Foreign Key column in Syncfusion® Grid: +The Syncfusion Grid component provides a convenient way to bind local data to a foreign key column. This allows you to display related data from a local data source within the grid. Here’s an example of how to bind local data to a Foreign Key column in Syncfusion Grid: In this example, data is the local data source for the Grid, and **Employee Name** is the local data source for the foreign key column. The ForeignKeyValue property is set to **FirstName** which represents the field name in the **Employee Name** that you want to display in the foreign key column. {% 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,87 +129,82 @@ 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" %} + +![Foreign key column with remote data](./images/foreignkey-remote-data.png) > * 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. ## Use edit template in foreign key column -The Syncfusion® Grid provides support for using an edit template in a foreign key column. By default, a dropdown component is used for editing foreign key column. Other editable components can be rendered using the EditTemplate feature of Grid. The following example demonstrates the way of using edit template with ComboBox component in the foreign column. +The Syncfusion Grid provides support for using an edit template in a foreign key column. By default, a dropdown component is used for editing foreign key column. Other editable components can be rendered using the EditTemplate feature of Grid. The following example demonstrates the way of using edit template with ComboBox component in the foreign column. In the following code example, the Employee Name is a foreign key column. When editing, the ComboBox component is rendered instead of DropDownList. @@ -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 { @@ -345,7 +323,7 @@ In the following code example, the Employee Name is a foreign key column. When e ## Customize filter UI in foreignkey column -The Syncfusion® Grid allows you to customize the filtering user interface (UI) for foreign key columns by using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. By default, a dropdown component is used for filtering foreign key columns. However, you can create your own custom filtering UI by [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. Here’s an example that demonstrates how to create a custom filtering UI in a foreign key column: +The Syncfusion Grid allows you to customize the filtering user interface (UI) for foreign key columns by using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. By default, a dropdown component is used for filtering foreign key columns. However, you can create your own custom filtering UI by [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. Here’s an example that demonstrates how to create a custom filtering UI in a foreign key column: > For all filter types other than FilterBar, filtering parameters will be sent in the form of `PredicateModel`. Here, T represents the type of `ForeignKeyValue` property when using the foreignkey column. @@ -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 @@ -687,159 +774,140 @@ In the following code sample, you can prevent default filter query generation us ## Enable multiple foreign key columns -The Syncfusion® Grid component supports the feature of enabling multiple foreign key columns with editing options. This allows users to display columns from foreign data sources in the Grid component. +The Syncfusion Grid component supports the feature of enabling multiple foreign key columns with editing options. This allows users to display columns from foreign data sources in the Grid component. In the following example, Employee Name and Ship City are foreign key columns that display the FirstName and ShipCity columns from foreign data. {% 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" %} - -> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-prevent-query-generation-for-foriegnkey-column). - +{% 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). \ No newline at end of file From be7a31c70d1bd2a1d781a331356417c21520f837 Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Fri, 6 Dec 2024 11:50:32 +0530 Subject: [PATCH 2/7] 926395: Revamped foreign column documentation in hotfix --- blazor/datagrid/foreignKey-column.md | 47 +++++++++--------- .../images/foreignkey-remote-data.png | Bin 0 -> 37620 bytes 2 files changed, 23 insertions(+), 24 deletions(-) create mode 100644 blazor/datagrid/images/foreignkey-remote-data.png diff --git a/blazor/datagrid/foreignKey-column.md b/blazor/datagrid/foreignKey-column.md index 737349bf00..316719a422 100644 --- a/blazor/datagrid/foreignKey-column.md +++ b/blazor/datagrid/foreignKey-column.md @@ -808,7 +808,6 @@ In the following example, Employee Name and Ship City are foreign key columns th public class OrderDetails { public static List order = new List(); - public OrderDetails(int OrderID, string CustomerId, int EmployeeId, string Shipcountry, double Freight) { this.OrderID = OrderID; @@ -821,21 +820,21 @@ public class OrderDetails { 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(10248, "VINET", 3, "France", 32.38)); + order.Add(new OrderDetails(10249, "TOMSP", 5, "Germany", 11.61)); + order.Add(new OrderDetails(10250, "HANAR", 1, "Brazil", 65.83)); + order.Add(new OrderDetails(10251, "VICTE", 6, "France", 41.34)); + order.Add(new OrderDetails(10252, "SUPRD", 2, "Belgium", 51.3)); + order.Add(new OrderDetails(10253, "HANAR", 4, "Brazil", 58.17)); + order.Add(new OrderDetails(10254, "CHOPS", 9, "Switzerland", 22.98)); + order.Add(new OrderDetails(10255, "RICSU", 7, "Switzerland", 148.33)); + order.Add(new OrderDetails(10256, "WELLI", 8, "Brazil", 13.97)); + order.Add(new OrderDetails(10257, "HILAA", 5, "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)); + order.Add(new OrderDetails(10259, "CENTC", 6, "Mexico", 3.25)); + order.Add(new OrderDetails(10260, "OTTIK", 2, "Germany", 55.09)); + order.Add(new OrderDetails(10261, "QUEDE", 7, "Brazil", 3.05)); + order.Add(new OrderDetails(10262, "RATTC", 4, "USA", 48.29)); } return order; } @@ -857,15 +856,15 @@ public class CountryDetails { 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(1, "Seattle")); + country.Add(new CountryDetails(2, "Tacoma")); + country.Add(new CountryDetails(3, "Kirkland")); + country.Add(new CountryDetails(4, "Redmond")); + country.Add(new CountryDetails(5, "London")); + country.Add(new CountryDetails(6, "London")); country.Add(new CountryDetails(7, "London")); - country.Add(new CountryDetails(8, "London")); - country.Add(new CountryDetails(9, "Seattle")); + country.Add(new CountryDetails(8, "Seattle")); + country.Add(new CountryDetails(9, "London")); } return country; } @@ -908,6 +907,6 @@ public class EmployeeDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLTirNeJykKOSmV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBJCLZnLheGLept?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). \ No newline at end of file diff --git a/blazor/datagrid/images/foreignkey-remote-data.png b/blazor/datagrid/images/foreignkey-remote-data.png new file mode 100644 index 0000000000000000000000000000000000000000..83ef95b683e4d10f6c07c6d5cc371285abdda44d GIT binary patch literal 37620 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
q%PW)#A=^^8&@xd1-A$nI}T_Fgc2($Jrh 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 Date: Fri, 6 Dec 2024 19:17:28 +0530 Subject: [PATCH 3/7] 926395: Revamped column reorder documentation in hotfix --- blazor/datagrid/column-reorder.md | 624 ++++++++++++++------------- blazor/datagrid/column-resizing.md | 228 +++++----- blazor/datagrid/foreignKey-column.md | 49 +-- 3 files changed, 449 insertions(+), 452 deletions(-) diff --git a/blazor/datagrid/column-reorder.md b/blazor/datagrid/column-reorder.md index 12ac191967..7b3b98d9a9 100644 --- a/blazor/datagrid/column-reorder.md +++ b/blazor/datagrid/column-reorder.md @@ -18,76 +18,70 @@ Here’s an example for column reordering in your Grid component: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using BlazorApp1.Data - + - - - - + + + + @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 OrderData +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName) { - public static List Orders = new List(); - public OrderData() - { - - } - public OrderData(int? OrderID,string CustomerID, string ShipCity, string ShipCountry) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipCountry = ShipCountry; - } - public static List GetAllRecords() + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + public static List GetAllRecords() + { + if (order.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcool")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "VINET", "Reims", "Vins et alcool")); - Orders.Add(new OrderData(10255,"TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10256, "TOMSP", "Münster", "Toms Spezialitäten")); - code += 5; - } - } - return Orders; + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); + order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel")); + order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); + order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); + order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipCountry { get; set; } + return order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} -The following represents Reordering of columns - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBAWMDcfVpmiwJz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrpMrXHLHHVDWpr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * You can disable reordering a particular column by setting the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of **GridColumn** as false. -
* When columns are reordered, the position of the corresponding column data will also be changed. As a result, you should ensure that any additional code or logic that relies on the order of the column data is updated accordingly. +> * You can disable reordering a particular column by setting the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) as **false**. +> * When columns are reordered, the position of the corresponding column data will also be changed. As a result, you should ensure that any additional code or logic that relies on the order of the column data is updated accordingly. ## Prevent reordering for particular column @@ -98,76 +92,72 @@ In this example, the **ShipCity** column is prevented from being reordered by se {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using BlazorApp1.Data - + - - - - + + + + @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 OrderData +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName) { - public static List Orders = new List(); - - - public OrderData() - { - - } - public OrderData(int? OrderID,string CustomerID, string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } - public static List GetAllRecords() + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + public static List GetAllRecords() + { + if (order.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcool")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "VINET", "Reims", "Vins et alcool")); - Orders.Add(new OrderData(10255,"TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10256, "TOMSP", "Münster", "Toms Spezialitäten")); - code += 5; - } - } - return Orders; + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); + order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel")); + order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); + order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); + order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } - } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrqWiZWTmfFUyGc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBJWLjxrwmYsHAA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Reorder columns externally The Syncfusion® Blazor Grid allows you to reorder columns externally, which means that using methods you can programmatically move columns around within the grid, based on their index or target index, or by using their field name. +> When reordering columns externally, you must set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of the grid to **true**. + ### Reorder column based on index You can use the [ReorderColumnByIndexAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnByIndexAsync_System_Int32_System_Int32_) method to reorder columns based on their current index. This method takes two arguments: @@ -183,79 +173,75 @@ In this example, we are moving the column at index 1 to index 2. {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons -@using BlazorApp1.Data -REORDER COLUMN BY INDEX - +REORDER COLUMN BY INDEX + - - - - - + + + + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private SfGrid Grid; + public List Orders { get; set; } protected override void OnInitialized() { - Orders = OrderData.GetAllRecords(); + Orders = OrderDetails.GetAllRecords(); } - public void ReOrder() + public void ReorderByIndex() { - this.Grid.ReorderColumnByIndexAsync(1, 2); + Grid.ReorderColumnByIndexAsync(1, 2); } } {% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} - public class OrderData +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName, string ShipRegion) { - public static List Orders = new List(); - public OrderData() - { - - } - public OrderData(int? OrderID,string CustomerID, string ShipCity, string ShipName,string ShipRegion) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - this.ShipRegion = ShipRegion; - } - public static List GetAllRecords() + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + this.ShipRegion = ShipRegion; + } + public static List GetAllRecords() + { + if (order.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcool", "CJ")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", "SP")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", "Táchira")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", "Táchira")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", "NM")); - Orders.Add(new OrderData(10254, "VINET", "Reims", "Vins et alcool", "SP")); - Orders.Add(new OrderData(10255,"TOMSP", "Münster", "Toms Spezialitäten", "NM")); - Orders.Add(new OrderData(10256, "TOMSP", "Münster", "Toms Spezialitäten","CJ")); - code += 5; - } - } - return Orders; + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier", "CJ")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten", "CJ")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock", "CJ")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices", "CJ")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese", "CJ")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt", "CJ")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora", "SP")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", "Táchira")); + order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel", "CJ")); + order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma", "CJ")); + order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen", "CJ")); + order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia", "RJ")); + order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", "NM")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } - public string ShipRegion { get; set; } + return order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public string ShipRegion { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLqXFUjMvoSvMXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLzChtxLaAoXrZm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Reorder column based on target index @@ -270,228 +256,262 @@ Here is an example of how to use the `ReorderColumnByTargetIndexAsync` method to {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons -@using BlazorApp1.Data -REORDER SINGLE COLUMN - +REORDER COLUMN BY TARGET INDEX + - - - - - + + + + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private SfGrid Grid; + public List Orders { get; set; } protected override void OnInitialized() { - Orders = OrderData.GetAllRecords(); + Orders = OrderDetails.GetAllRecords(); } - public void SingleColumn() + public void ReorderByTargetIndex() { - this.Grid.ReorderColumnByTargetIndexAsync("OrderID", 3); + Grid.ReorderColumnByTargetIndexAsync("OrderID", 3); } } {% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} - public class OrderData +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName, string ShipRegion) { - public static List Orders = new List(); - public OrderData() - { - - } - public OrderData(int? OrderID,string CustomerID, string ShipCity, string ShipName,string ShipRegion) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - this.ShipRegion = ShipRegion; - } - public static List GetAllRecords() + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + this.ShipRegion = ShipRegion; + } + public static List GetAllRecords() + { + if (order.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcool", "CJ")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", "SP")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", "Táchira")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", "Táchira")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", "NM")); - Orders.Add(new OrderData(10254, "VINET", "Reims", "Vins et alcool", "SP")); - Orders.Add(new OrderData(10255,"TOMSP", "Münster", "Toms Spezialitäten", "NM")); - Orders.Add(new OrderData(10256, "TOMSP", "Münster", "Toms Spezialitäten","CJ")); - code += 5; - } - } - return Orders; + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier", "CJ")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten", "CJ")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock", "CJ")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices", "CJ")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese", "CJ")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt", "CJ")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora", "SP")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", "Táchira")); + order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel", "CJ")); + order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma", "CJ")); + order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen", "CJ")); + order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia", "RJ")); + order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", "NM")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } - public string ShipRegion { get; set; } + return order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public string ShipRegion { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htVUMWjiJlVlesGN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpCVZRUILkYtuK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Reorder column based on field names -The [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnAsync_System_String_System_String_) method of the Grid allows you to reorder list of columns based on their field names. This method takes two arguments: +The Syncfusion® Blazor DataGrid allows you to programmatically reorder columns using the [ReorderColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnAsync_System_String_System_String_) and [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnAsync_System_String_System_String_) methods. These methods provide flexibility for dynamically rearranging columns based on their field names. -* **FromFieldName**: The field name of the column you want to move. -* **ToFieldName** : The field name of the column you want to move the column to. +1. `ReorderColumnAsync`: This method is used to reorder a single column by specifying its current field name and the target column's field name. It takes the following arguments: + * **FromFieldName**: The field name of the column to be moved. + * **ToFieldName**: The field name of the column you want to move the column to. +2. `ReorderColumnsAsync`: This method reorders multiple columns simultaneously by providing their field names in a list. It takes the following arguments: + * **FromFieldName**: The field name of the column you want to move. + * **ToFieldName** : The field name of the column you want to move the column to. -Here is an example of how to use the `ReorderColumnsAsync` method to reorder multiple columns based on field names: +Here is an example demonstrating how to use the `ReorderColumnAsync` and `ReorderColumnsAsync` method to reorder single and multiple columns based on their field names: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons -@using BlazorApp1.Data - - - + + + - - - - - + + + + + @code { public List ColumnName = (new List { "ShipCity", "ShipRegion", "ShipName" }); - private SfGrid Grid; - public List Orders { get; set; } + private SfGrid Grid; + public List Orders { get; set; } protected override void OnInitialized() { - Orders = OrderData.GetAllRecords(); + Orders = OrderDetails.GetAllRecords(); } public void ReorderSingleColumn() { - this.Grid.ReorderColumnsAsync("ShipCity", "OrderID"); + Grid.ReorderColumnAsync("ShipCity", "OrderID"); } public void ReorderMultipleColumn() { - this.Grid.ReorderColumnsAsync(ColumnName, "OrderID"); + Grid.ReorderColumnsAsync(ColumnName, "OrderID"); } } {% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} - public class OrderData +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName, string ShipRegion) { - public static List Orders = new List(); - public OrderData() - { - - } - public OrderData(int? OrderID,string CustomerID, string ShipCity, string ShipName,string ShipRegion) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - this.ShipRegion = ShipRegion; - } - public static List GetAllRecords() + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + this.ShipRegion = ShipRegion; + } + public static List GetAllRecords() + { + if (order.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcool", "CJ")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", "SP")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", "Táchira")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", "Táchira")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", "NM")); - Orders.Add(new OrderData(10254, "VINET", "Reims", "Vins et alcool", "SP")); - Orders.Add(new OrderData(10255,"TOMSP", "Münster", "Toms Spezialitäten", "NM")); - Orders.Add(new OrderData(10256, "TOMSP", "Münster", "Toms Spezialitäten","CJ")); - code += 5; - } - } - return Orders; + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier", "CJ")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten", "CJ")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock", "CJ")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices", "CJ")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", "RJ")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese", "CJ")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt", "CJ")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora", "SP")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", "Táchira")); + order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel", "CJ")); + order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma", "CJ")); + order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen", "CJ")); + order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia", "RJ")); + order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", "NM")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } - public string ShipRegion { get; set; } + return order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public string ShipRegion { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhKWMZMfPbIjSKF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrTsBjxJZWsNAMx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLfsBXHpgzuFInT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails + { + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCity, string ShipName, string ShipCountry, string ShipAddress) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + this.ShipCountry = ShipCountry; + this.ShipAddress = ShipAddress; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "Australia", "59 rue de l Abbaye")); + order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Australia", "Luisenstr. 48")); + order.Add(new OrderDetails(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67")); + order.Add(new OrderDetails(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "Australia", "2, rue du Commerce")); + order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "United States", "Boulevard Tirou, 255")); + order.Add(new OrderDetails(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67")); + order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese", "Switzerland", "Hauptstr. 31")); + order.Add(new OrderDetails(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt", "Switzerland", "Starenweg 5")); + order.Add(new OrderDetails(10256, "WELLI", 13.97, "Resende", "Wellington Importadora", "Brazil", "Rua do Mercado, 12")); + order.Add(new OrderDetails(10257, "HILAA", 81.91, "San Cristóbal", "HILARION-Abastos", "Venezuela", "Carrera 22 con Ave. Carlos Soublette #8-35")); + order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Graz", "Ernst Handel", "Austria", "Kirchgasse 6")); + order.Add(new OrderDetails(10259, "CENTC", 3.25, "México D.F.", "Centro comercial Moctezuma", "Mexico", "Sierras de Granada 9993")); + order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen", "Germany", "Mehrheimerstr. 369")); + order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que Delícia", "Brazil", "Rua da Panificadora, 12")); + order.Add(new OrderDetails(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery", "USA", "2817 Milton Dr.")); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } + public string ShipAddress { get; set; } + } +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBTWViiLnOofXge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file From 2d49b957379fde93fd515e62b4f9afabac99b851 Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Wed, 11 Dec 2024 17:50:57 +0530 Subject: [PATCH 5/7] 926395: Revamped column resizing documentation in hotfix --- blazor/datagrid/column-resizing.md | 2 +- blazor/datagrid/foreignKey-column.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/datagrid/column-resizing.md b/blazor/datagrid/column-resizing.md index 1674dab74a..508d5f8e91 100644 --- a/blazor/datagrid/column-resizing.md +++ b/blazor/datagrid/column-resizing.md @@ -371,7 +371,7 @@ The following example demonstrates how to resize the columns in a grid. This is - + diff --git a/blazor/datagrid/foreignKey-column.md b/blazor/datagrid/foreignKey-column.md index f71b6a8a15..f8d1096e05 100644 --- a/blazor/datagrid/foreignKey-column.md +++ b/blazor/datagrid/foreignKey-column.md @@ -433,9 +433,9 @@ public class EmployeeDetails ## Use filter bar template in foreign key column -You can use the filter template in a foreign key column in Grid by using the **FilterTemplate** property. This allows you to customize the filter bar for the foreign key column with a custom component or HTML template. Here’s an example that demonstrates how to use a Filter template in a foreign key column: +You can use the filter template in a foreign key column in Grid by using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This allows you to customize the filter bar for the foreign key column with a custom component or HTML template. Here’s an example that demonstrates how to use a Filter template in a foreign key column: -In this example, the “EmployeeID” column is a foreign key column, and the filter function is used as the filter template for this column. The filter function can be defined in your component code and should return the desired component or HTML template for the filter bar. The column header shows the custom filter bar template and you can select filter value by using the DropDown options. +In this example, the **“EmployeeID”** column is a foreign key column. The `FilterTemplate` property is used to render a Syncfusion DropDownList component as a filter, you can select filter value by using the **DropDown** options. {% tabs %} {% highlight razor tabtitle="Index.razor" %} From dea9dbcff0da7bcd10284bcb88fbc600105735ff Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Thu, 12 Dec 2024 17:36:02 +0530 Subject: [PATCH 6/7] 926395: Revamped column chooser documentation in hotfix --- blazor/datagrid/column-chooser.md | 364 ++++++++++++++---------------- blazor/datagrid/column-menu.md | 143 ++++++------ 2 files changed, 237 insertions(+), 270 deletions(-) diff --git a/blazor/datagrid/column-chooser.md b/blazor/datagrid/column-chooser.md index bd90bf9111..16b2f8ace0 100644 --- a/blazor/datagrid/column-chooser.md +++ b/blazor/datagrid/column-chooser.md @@ -14,7 +14,6 @@ The column chooser feature in the Syncfusion® @@ -22,6 +21,7 @@ The column chooser feature in the Syncfusion® + @code { @@ -35,55 +35,50 @@ The column chooser feature in the Syncfusion® Order = new List(); + public OrderData(int OrderID, double Freight, DateTime OrderDate, string ShipCity, string ShipCountry) { - public static List Orders = new List(); - public OrderData() - { - - } - public OrderData(int? OrderID,string ShipCountry,double Freight,DateTime OrderDate) + this.OrderID = OrderID; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.Count == 0) { - this.OrderID = OrderID; - this.ShipCountry = ShipCountry; - this.Freight = Freight; - this.OrderDate = OrderDate; + Order.Add(new OrderData(10248, 32.38, new DateTime(1996, 7, 4), "Reims", "Australia")); + Order.Add(new OrderData(10249, 11.61, new DateTime(1996, 7, 5), "Münster", "Australia")); + Order.Add(new OrderData(10250, 65.83, new DateTime(1996, 7, 8), "Rio de Janeiro", "United States")); + Order.Add(new OrderData(10251, 41.34, new DateTime(1996, 7, 8), "Lyon", "Australia")); + Order.Add(new OrderData(10252, 51.3, new DateTime(1996, 7, 9), "Charleroi","United States")); + Order.Add(new OrderData(10253, 58.17, new DateTime(1996, 7, 10), "Rio de Janeiro","United States")); + Order.Add(new OrderData(10254, 22.98, new DateTime(1996, 7, 11), "Bern", "Switzerland")); + Order.Add(new OrderData(10255, 148.33, new DateTime(1996, 7, 12), "Genève", "Switzerland")); + Order.Add(new OrderData(10256, 13.97, new DateTime(1996, 7, 15), "Resende", "Brazil")); + Order.Add(new OrderData(10257, 81.91, new DateTime(1996, 7, 16), "San Cristóbal", "Venezuela")); + Order.Add(new OrderData(10258, 140.51, new DateTime(1996, 7, 17), "Graz", "Austria")); + Order.Add(new OrderData(10259, 3.25, new DateTime(1996, 7, 18), "México D.F.", "Mexico")); + Order.Add(new OrderData(10260, 55.09, new DateTime(1996, 7, 19), "Köln", "Germany")); + Order.Add(new OrderData(10261, 3.05, new DateTime(1996, 7, 19), "Rio de Janeiro", "Brazil")); + Order.Add(new OrderData(10262, 48.29, new DateTime(1996, 7, 22), "Albuquerque", "USA")); } - - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "France", 33.33,new DateTime(1996,07,07))); - Orders.Add(new OrderData(10249, "Germany", 89.76, new DateTime(1996, 07, 12))); - Orders.Add(new OrderData(10250, "Brazil",78.67, new DateTime(1996, 07, 13))); - Orders.Add(new OrderData(10251, "Belgium", 55.65, new DateTime(1996, 07, 14))); - Orders.Add(new OrderData(10252, "Venezuela",11.09, new DateTime(1996, 07, 15))); - Orders.Add(new OrderData(10253, "Venezuela",98.98, new DateTime(1996, 07, 16))); - Orders.Add(new OrderData(10254, "Belgium", 78.75, new DateTime(1996, 07, 17))); - Orders.Add(new OrderData(10255, "Germany", 44.07, new DateTime(1996, 07, 18))); - Orders.Add(new OrderData(10256, "France", 67.74, new DateTime(1996, 07, 19))); - code += 5; - } - } - return Orders; - } - public int? OrderID { get; set; } - public DateTime OrderDate { get; set; } - public string ShipCountry { get; set; } - public double Freight { get; set; } - - } + return Order; + } + public int OrderID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCountry { get; set; } +} {% endhighlight %} {% endtabs %} -> The column chooser dialog displays the header text of each column by default. If the header text is not defined for a column, the corresponding column field name is displayed instead. - -The following GIF represents the column chooser functionality in DataGrid +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLfsVirCTHjHXFK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhACCjWydDhkWrH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +> The column chooser dialog displays the header text of each column by default. If the header text is not defined for a column, the corresponding column field name is displayed instead. ## Hide column in column chooser dialog @@ -94,15 +89,14 @@ In this example, the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using BlazorApp1.Data - + - - + + @code { @@ -115,58 +109,52 @@ In this example, the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData +public class OrderData +{ + public static List Order = new List(); + public OrderData(int OrderID, double Freight, DateTime OrderDate, string ShipCity, string ShipCountry) { - public static List Orders = new List(); - - - public OrderData() - { - - } - public OrderData(int? OrderID,string ShipCountry,double Freight,DateTime OrderDate,string ShipCity) + this.OrderID = OrderID; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.Count == 0) { - this.OrderID = OrderID; - this.ShipCountry = ShipCountry; - this.Freight = Freight; - this.OrderDate = OrderDate; - this.ShipCity = ShipCity; + Order.Add(new OrderData(10248, 32.38, new DateTime(1996, 7, 4), "Reims", "Australia")); + Order.Add(new OrderData(10249, 11.61, new DateTime(1996, 7, 5), "Münster", "Australia")); + Order.Add(new OrderData(10250, 65.83, new DateTime(1996, 7, 8), "Rio de Janeiro", "United States")); + Order.Add(new OrderData(10251, 41.34, new DateTime(1996, 7, 8), "Lyon", "Australia")); + Order.Add(new OrderData(10252, 51.3, new DateTime(1996, 7, 9), "Charleroi","United States")); + Order.Add(new OrderData(10253, 58.17, new DateTime(1996, 7, 10), "Rio de Janeiro","United States")); + Order.Add(new OrderData(10254, 22.98, new DateTime(1996, 7, 11), "Bern", "Switzerland")); + Order.Add(new OrderData(10255, 148.33, new DateTime(1996, 7, 12), "Genève", "Switzerland")); + Order.Add(new OrderData(10256, 13.97, new DateTime(1996, 7, 15), "Resende", "Brazil")); + Order.Add(new OrderData(10257, 81.91, new DateTime(1996, 7, 16), "San Cristóbal", "Venezuela")); + Order.Add(new OrderData(10258, 140.51, new DateTime(1996, 7, 17), "Graz", "Austria")); + Order.Add(new OrderData(10259, 3.25, new DateTime(1996, 7, 18), "México D.F.", "Mexico")); + Order.Add(new OrderData(10260, 55.09, new DateTime(1996, 7, 19), "Köln", "Germany")); + Order.Add(new OrderData(10261, 3.05, new DateTime(1996, 7, 19), "Rio de Janeiro", "Brazil")); + Order.Add(new OrderData(10262, 48.29, new DateTime(1996, 7, 22), "Albuquerque", "USA")); } - - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "France", 33.33,new DateTime(1996,07,07), "Reims")); - Orders.Add(new OrderData(10249, "Germany", 89.76, new DateTime(1996, 07, 12), "Münster")); - Orders.Add(new OrderData(10250, "Brazil",78.67, new DateTime(1996, 07, 13), "Rio de Janeiro")); - Orders.Add(new OrderData(10251, "Belgium", 55.65, new DateTime(1996, 07, 14), "Lyon")); - Orders.Add(new OrderData(10252, "Venezuela",11.09, new DateTime(1996, 07, 15), "Charleroi")); - Orders.Add(new OrderData(10253, "Venezuela",98.98, new DateTime(1996, 07, 16), "Lyon")); - Orders.Add(new OrderData(10254, "Belgium", 78.75, new DateTime(1996, 07, 17), "Rio de Janeiro")); - Orders.Add(new OrderData(10255, "Germany", 44.07, new DateTime(1996, 07, 18), "Münster")); - Orders.Add(new OrderData(10256, "France", 67.74, new DateTime(1996, 07, 19), "Reims")); - code += 5; - } - } - return Orders; - } - public int? OrderID { get; set; } - public DateTime OrderDate { get; set; } - public string ShipCountry { get; set; } - public double Freight { get; set; } - public string ShipCity { get; set; } + return Order; } + public int OrderID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCountry { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVUCijMSnycYcHm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -> The `ShowInColumnChooser` property is applied to each element individually. By setting it to false, you can hide specific columns from the column chooser dialog. +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVJihiLMwbAZjZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +> * The `ShowInColumnChooser` property is applied to each element individually. By setting it to false, you can hide specific columns from the column chooser dialog. +> * To work with showing and hiding columns, it is necessary to have at least one column of the grid in a visible state. ## Open column chooser by external button @@ -178,21 +166,19 @@ Here’s an example of how to open the column chooser in the Grid using an exter {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons -@using BlazorApp1.Data - - - + + - + - - + + @code { - private SfGrid DefaultGrid; + private SfGrid Grid; public List Orders { get; set; } protected override void OnInitialized() { @@ -200,57 +186,54 @@ Here’s an example of how to open the column chooser in the Grid using an exter } public void Show() { - this.DefaultGrid.OpenColumnChooserAsync(100, 40); + Grid.OpenColumnChooserAsync(100, 40); } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData +public class OrderData +{ + public static List Order = new List(); + public OrderData(int OrderID, double Freight, DateTime OrderDate, string ShipCity, string ShipCountry) { - public static List Orders = new List(); - public OrderData() - { - - } - public OrderData(int? OrderID,string ShipCountry,double Freight,DateTime OrderDate,string ShipCity) + this.OrderID = OrderID; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.Count == 0) { - this.OrderID = OrderID; - this.ShipCountry = ShipCountry; - this.Freight = Freight; - this.OrderDate = OrderDate; - this.ShipCity = ShipCity; + Order.Add(new OrderData(10248, 32.38, new DateTime(1996, 7, 4), "Reims", "Australia")); + Order.Add(new OrderData(10249, 11.61, new DateTime(1996, 7, 5), "Münster", "Australia")); + Order.Add(new OrderData(10250, 65.83, new DateTime(1996, 7, 8), "Rio de Janeiro", "United States")); + Order.Add(new OrderData(10251, 41.34, new DateTime(1996, 7, 8), "Lyon", "Australia")); + Order.Add(new OrderData(10252, 51.3, new DateTime(1996, 7, 9), "Charleroi","United States")); + Order.Add(new OrderData(10253, 58.17, new DateTime(1996, 7, 10), "Rio de Janeiro","United States")); + Order.Add(new OrderData(10254, 22.98, new DateTime(1996, 7, 11), "Bern", "Switzerland")); + Order.Add(new OrderData(10255, 148.33, new DateTime(1996, 7, 12), "Genève", "Switzerland")); + Order.Add(new OrderData(10256, 13.97, new DateTime(1996, 7, 15), "Resende", "Brazil")); + Order.Add(new OrderData(10257, 81.91, new DateTime(1996, 7, 16), "San Cristóbal", "Venezuela")); + Order.Add(new OrderData(10258, 140.51, new DateTime(1996, 7, 17), "Graz", "Austria")); + Order.Add(new OrderData(10259, 3.25, new DateTime(1996, 7, 18), "México D.F.", "Mexico")); + Order.Add(new OrderData(10260, 55.09, new DateTime(1996, 7, 19), "Köln", "Germany")); + Order.Add(new OrderData(10261, 3.05, new DateTime(1996, 7, 19), "Rio de Janeiro", "Brazil")); + Order.Add(new OrderData(10262, 48.29, new DateTime(1996, 7, 22), "Albuquerque", "USA")); } - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "France", 33.33,new DateTime(1996,07,07), "Reims")); - Orders.Add(new OrderData(10249, "Germany", 89.76, new DateTime(1996, 07, 12), "Münster")); - Orders.Add(new OrderData(10250, "Brazil",78.67, new DateTime(1996, 07, 13), "Rio de Janeiro")); - Orders.Add(new OrderData(10251, "Belgium", 55.65, new DateTime(1996, 07, 14), "Lyon")); - Orders.Add(new OrderData(10252, "Venezuela",11.09, new DateTime(1996, 07, 15), "Charleroi")); - Orders.Add(new OrderData(10253, "Venezuela",98.98, new DateTime(1996, 07, 16), "Lyon")); - Orders.Add(new OrderData(10254, "Belgium", 78.75, new DateTime(1996, 07, 17), "Rio de Janeiro")); - Orders.Add(new OrderData(10255, "Germany", 44.07, new DateTime(1996, 07, 18), "Münster")); - Orders.Add(new OrderData(10256, "France", 67.74, new DateTime(1996, 07, 19), "Reims")); - code += 5; - } - } - return Orders; - } - public int? OrderID { get; set; } - public DateTime OrderDate { get; set; } - public string ShipCountry { get; set; } - public double Freight { get; set; } - public string ShipCity { get; set; } + return Order; } + public int OrderID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCountry { get; set; } +} {% endhighlight %} {% endtabs %} - +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLTMhsLCaIRtynp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customize column chooser dialog size @@ -281,11 +264,11 @@ This can be demonstrated in the following sample: - - + + - - + + -@code { - +@code { public List Orders { get; set; } protected override void OnInitialized() { @@ -422,55 +498,133 @@ Here is an example that demonstrates how to customize the column menu icon in th } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData +public class OrderData +{ + public static List Orders = new List(); + public OrderData(int OrderID, string CustomerID, double Freight,string ShipCity) { - public static List Orders = new List(); - - - public OrderData() - { - - } - public OrderData(int? OrderID, string CustomerID, double Freight,string ShipCity) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.ShipName = ShipCity; - - } - public static List GetAllRecords() + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.Freight = Freight; + this.ShipName = ShipCity; + } + public static List GetAllRecords() + { + if (Orders.Count() == 0) { - if (Orders.Count() == 0) + int code = 10; + for (int i = 1; i < 2; i++) { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "ALFKI",33.32, "France")); - Orders.Add(new OrderData(10249, "ANANTR", 34.32, "Germany")); - Orders.Add(new OrderData(10250, "ANTON", 36.32, "Brazil")); - Orders.Add(new OrderData(10251, "BLONP", 54.31, "Belgium")); - Orders.Add(new OrderData(10252, "BOLID", 35.36, "Switzerland")); - Orders.Add(new OrderData(10253, "ANTON", 37.35, "Switzerland")); - Orders.Add(new OrderData(10254, "BLONP", 33.32, "Germany")); - Orders.Add(new OrderData(10255, "BOLID", 76.74, "Germany")); - Orders.Add(new OrderData(10256, "ALFKI",55.43, "Belgium")); - code += 5; - } + Orders.Add(new OrderData(10248, "ALFKI",33.32, "France")); + Orders.Add(new OrderData(10249, "ANANTR", 34.32, "Germany")); + Orders.Add(new OrderData(10250, "ANTON", 36.32, "Brazil")); + Orders.Add(new OrderData(10251, "BLONP", 54.31, "Belgium")); + Orders.Add(new OrderData(10252, "BOLID", 35.36, "Switzerland")); + Orders.Add(new OrderData(10253, "ANTON", 37.35, "Switzerland")); + Orders.Add(new OrderData(10254, "BLONP", 33.32, "Germany")); + Orders.Add(new OrderData(10255, "BOLID", 76.74, "Germany")); + Orders.Add(new OrderData(10256, "ALFKI",55.43, "Belgium")); + code += 5; } - return Orders; } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public double? Freight { get; set; } - public string ShipName { get; set; } + return Orders; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} - {% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgCMDHftqrDkea?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgCMDHftqrDkea?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Column menu events + +The column menu in Syncfusion Blazor DataGrid provides a set of events that allow customization of behavior and performing actions when the column menu is opened or clicked. The below events are helpful for adding additional functionality or implementing specific actions based on user interactions with the column menu. +1. The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen) event triggers before the column menu opens. + +2. The [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event triggers when the user clicks the column menu of the grid. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + +

+ @ColumnMenuMessage +
+ + + + + + + + + + + +@code { + private SfGrid Grid; + public string ColumnMenuMessage; + public List Orders { get; set; } + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } + public void OnColumnMenuOpenHandler(ColumnMenuOpenEventArgs args) + { + ColumnMenuMessage= "OnColumnMenuOpen event triggered"; + } + public void ColumnMenuItemClickedHandler(ColumnMenuClickEventArgs args) + { + ColumnMenuMessage= "ColumnMenuItemClicked event triggered"; + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData +{ + public static List Order = new List(); + public OrderData(int OrderID, double Freight, string CustomerId, string ShipCity) + { + this.OrderID = OrderID; + this.Freight = Freight; + this.CustomerID = CustomerId; + this.ShipCity = ShipCity; + } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderData(10248, 32.38, "VINET", "Reims")); + Order.Add(new OrderData(10249, 11.61, "TOMSP", "Münster")); + Order.Add(new OrderData(10250, 65.83, "HANAR", "Rio de Janeiro")); + Order.Add(new OrderData(10251, 41.34, "VICTE", "Lyon")); + Order.Add(new OrderData(10252, 51.3, "SUPRD", "Charleroi")); + Order.Add(new OrderData(10253, 58.17, "HANAR", "Rio de Janeiro")); + Order.Add(new OrderData(10254, 22.98, "CHOPS", "Bern")); + Order.Add(new OrderData(10255, 148.33, "RICSU", "Genève")); + Order.Add(new OrderData(10256, 13.97, "WELLI", "Resende")); + Order.Add(new OrderData(10257, 81.91, "HILAA", "San Cristóbal")); + Order.Add(new OrderData(10258, 140.51, "ERNSH", "Graz")); + Order.Add(new OrderData(10259, 3.25, "CENTC", "México D.F.")); + Order.Add(new OrderData(10260, 55.09, "OTTIK", "Köln")); + Order.Add(new OrderData(10261, 3.05, "QUEDE", "Rio de Janeiro")); + Order.Add(new OrderData(10262, 48.29, "RATTC", "Albuquerque")); + } + return Order; + } + public int OrderID { get; set; } + public double Freight { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } +} +{% endhighlight %} +{% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthfMhiKzNimycPe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}