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() { @@ -357,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" %} +{% 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 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..f8d1096e05 100644 --- a/blazor/datagrid/foreignKey-column.md +++ b/blazor/datagrid/foreignKey-column.md @@ -28,116 +28,100 @@ In this example, data is the local data source for the Grid, and **Employee Name {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.DropDowns -@using BlazorApp1.Data - - + - - - - + + + + @code { - public List Orders { get; set; } - public List Employees { get; set; } + public List Orders { get; set; } + public List Employees { get; set; } protected override void OnInitialized() { - Orders = OrderData.GetAllRecords(); - Employees = EmployeeData.GetAllRecords(); + Orders = OrderDetails.GetAllRecords(); + Employees = EmployeeDetails.GetAllRecords(); } } {% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} - public class EmployeeData +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string Shipcity, int EmployeeId, double Freight) { - public static List Employees = new List(); - public EmployeeData() - { - - } - public EmployeeData(int? employeeID, string firstName) - { - EmployeeID = employeeID; - FirstName = firstName; - } - public static List GetAllRecords() - { - if (Employees.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Employees.Add(new EmployeeData( 1, "Nancy")); - Employees.Add(new EmployeeData( 2, "Andrew")); - Employees.Add(new EmployeeData( 3, "Janet")); - Employees.Add(new EmployeeData( 4, "Nancy")); - Employees.Add(new EmployeeData( 5, "Margaret")); - Employees.Add(new EmployeeData( 6, "Steven")); - Employees.Add(new EmployeeData( 7, "Janet")); - Employees.Add(new EmployeeData( 8, "Andrew")); - Employees.Add(new EmployeeData(9, "Nancy")); - code += 5; - } - } - return Employees; - } - public int? EmployeeID { get; set; } - public string FirstName { get; set; } + this.OrderID = OrderID; + this.ShipCity = Shipcity; + this.EmployeeID = EmployeeId; + this.Freight = Freight; } - public class OrderData + public static List GetAllRecords() { - public static List Orders = new List(); - - public OrderData() - { - - } - public OrderData(int? OrderID, int? EmployeeID, string ShipCity, double? Freight) - { - this.OrderID = OrderID; - this.EmployeeID = EmployeeID; - this.ShipCity = ShipCity; - this.Freight = Freight; - } - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248,1, "Reims", 32.18)); - Orders.Add(new OrderData(10249,2, "Münster",33.33)); - Orders.Add(new OrderData(10250,3, "Rio de Janeiro",12.35)); - Orders.Add(new OrderData(10251,4, "Reims", 22.65)); - Orders.Add(new OrderData(10252,5, "Lyon", 63.43)); - Orders.Add(new OrderData(10253,6, "Charleroi",56.98)); - Orders.Add(new OrderData(10254,7, "Rio de Janeiro", 45.65)); - Orders.Add(new OrderData(10255,8, "Münster", 11.13)); - Orders.Add(new OrderData(10256,9, "Reims", 87.59)); - code += 5; - } - } - return Orders; - } - public int? OrderID { get; set; } - public int? EmployeeID { get; set; } - public string ShipCity { get; set; } - public double? Freight { get; set; } + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "Reims", 5, 32.38)); + order.Add(new OrderDetails(10249, "Münster", 6, 11.61)); + order.Add(new OrderDetails(10250, "Rio de Janeiro", 4, 65.83)); + order.Add(new OrderDetails(10251, "Lyon", 3, 41.34)); + order.Add(new OrderDetails(10252, "Charleroi", 4, 51.3)); + order.Add(new OrderDetails(10253, "Rio de Janeiro", 3, 58.17)); + order.Add(new OrderDetails(10254, "Bern", 5, 22.98)); + order.Add(new OrderDetails(10255, "Genève", 9, 48.33)); + order.Add(new OrderDetails(10256, "Resende", 3, 13.97)); + order.Add(new OrderDetails(10257, "San Cristóbal", 4, 81.91)); + order.Add(new OrderDetails(10258, "Graz", 1, 40.51)); + order.Add(new OrderDetails(10259, "México D.F.", 4, 3.25)); + order.Add(new OrderDetails(10260, "Köln", 4, 55.09)); + order.Add(new OrderDetails(10261, "Rio de Janeiro", 4, 3.05)); + order.Add(new OrderDetails(10262, "Albuquerque", 8, 48.29)); + } + return order; + } + public int OrderID { get; set; } + public string ShipCity { get; set; } + public int EmployeeID { get; set; } + public double Freight { get; set; } +} +public class EmployeeDetails +{ + public static List employee = new List(); + public EmployeeDetails(int employeeID, string firstName) + { + this.EmployeeID = employeeID; + this.FirstName = firstName; + } + public static List GetAllRecords() + { + if (employee.Count == 0) + { + employee.Add(new EmployeeDetails(1, "Nancy")); + employee.Add(new EmployeeDetails(2, "Andrew")); + employee.Add(new EmployeeDetails(3, "Janet")); + employee.Add(new EmployeeDetails(4, "Margaret")); + employee.Add(new EmployeeDetails(5, "Steven")); + employee.Add(new EmployeeDetails(6, "Michael")); + employee.Add(new EmployeeDetails(7, "Robert")); + employee.Add(new EmployeeDetails(8, "Laura")); + employee.Add(new EmployeeDetails(9, "Anne")); + } + return employee; } + public int EmployeeID { get; set; } + public string FirstName { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrqNPVEApFgHAZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhTWhNzzhjrqtUe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Binding remote data -The Foreign key column in Syncfusion® Grid allows you to bind remote data for a foreign key column. You can use ```SfDataManager``` component instead of using ```DataSource``` property. +The Foreign key column in Syncfusion® Grid allows you to bind remote data for a foreign key column. You can use `SfDataManager` component instead of using `DataSource` property. -This example demonstrates how to use the foreign key column with remote data binding using the ```ODataV4Adaptor``` in the grid: +This example demonstrates how to use the foreign key column with remote data binding using the `ODataV4Adaptor` in the grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -145,80 +129,75 @@ This example demonstrates how to use the foreign key column with remote data bin - - + + - - + + @code { - public List Orders { get; set; } + public List Orders { get; set; } protected override void OnInitialized() { - Orders = OrderData.GetAllRecords(); + Orders = OrderDetails.GetAllRecords(); } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class EmployeeData +public class EmployeeData { public static List Employees = new List(); public EmployeeData() { - - } - - public int? EmployeeID { get; set; } + } + public int EmployeeID { get; set; } public string FirstName { get; set; } } - public class OrderData +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string Shipcity, int EmployeeId, double Freight) { - public static List Orders = new List(); - - public OrderData() - { - - } - public OrderData(int? OrderID, int? EmployeeID, string ShipCity, double? Freight) - { - this.OrderID = OrderID; - this.EmployeeID = EmployeeID; - this.ShipCity = ShipCity; - this.Freight = Freight; - } - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, 1, "Reims", 32.18)); - Orders.Add(new OrderData(10249, 2, "Münster", 33.33)); - Orders.Add(new OrderData(10250, 3, "Rio de Janeiro", 12.35)); - Orders.Add(new OrderData(10251, 4, "Reims", 22.65)); - Orders.Add(new OrderData(10252, 5, "Lyon", 63.43)); - Orders.Add(new OrderData(10253, 6, "Charleroi", 56.98)); - Orders.Add(new OrderData(10254, 7, "Rio de Janeiro", 45.65)); - Orders.Add(new OrderData(10255, 8, "Münster", 11.13)); - Orders.Add(new OrderData(10256, 9, "Reims", 87.59)); - code += 5; - } - } - return Orders; - } - public int? OrderID { get; set; } - public int? EmployeeID { get; set; } - public string ShipCity { get; set; } - public double? Freight { get; set; } + this.OrderID = OrderID; + this.ShipCity = Shipcity; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "Reims", 5, 32.38)); + order.Add(new OrderDetails(10249, "Münster", 6, 11.61)); + order.Add(new OrderDetails(10250, "Rio de Janeiro", 4, 65.83)); + order.Add(new OrderDetails(10251, "Lyon", 3, 41.34)); + order.Add(new OrderDetails(10252, "Charleroi", 4, 51.3)); + order.Add(new OrderDetails(10253, "Rio de Janeiro", 3, 58.17)); + order.Add(new OrderDetails(10254, "Bern", 5, 22.98)); + order.Add(new OrderDetails(10255, "Genève", 9, 48.33)); + order.Add(new OrderDetails(10256, "Resende", 3, 13.97)); + order.Add(new OrderDetails(10257, "San Cristóbal", 4, 81.91)); + order.Add(new OrderDetails(10258, "Graz", 1, 40.51)); + order.Add(new OrderDetails(10259, "México D.F.", 4, 3.25)); + order.Add(new OrderDetails(10260, "Köln", 4, 55.09)); + order.Add(new OrderDetails(10261, "Rio de Janeiro", 4, 3.05)); + order.Add(new OrderDetails(10262, "Albuquerque", 8, 48.29)); + } + return order; } + public int OrderID { get; set; } + public string ShipCity { get; set; } + public int EmployeeID { get; set; } + public double Freight { get; set; } +} {% endhighlight %} {% endtabs %} - {% previewsample "https://blazorplayground.syncfusion.com/embed/LjrJXMWBgWWmRbjx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![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. @@ -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,262 +333,360 @@ 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() - { - - } - 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/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) ## 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" %} @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/VtBpiVDnrpdKsebf?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(); + } + private int CustomAggregateFn() + { + 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 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/VXBAiiZngvqDDFvZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVzisLyKJzudYVg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Prevent filter query generation for foreignkey column @@ -694,152 +770,132 @@ In the following example, Employee Name and Ship City are foreign key columns th {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using BlazorApp1.Data - - - - + + + + + @code { - private SfGrid Grid; - public List Orders { get; set; } - public List Countries { get; set; } - public List Employees { get; set; } - + public List Orders { get; set; } + public List Countries { get; set; } + public List Employees { get; set; } protected override void OnInitialized() { - Orders = OrderData.GetAllRecords(); - Employees = EmployeeData.GetAllRecords(); - Countries = ShipCountry.GetAllRecords(); + Orders = OrderDetails.GetAllRecords(); + Employees = EmployeeDetails.GetAllRecords(); + Countries = CountryDetails.GetAllRecords(); } } {% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} - public class ShipCountry +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, string Shipcountry, double Freight) { - public static List Countries = new List(); - public ShipCountry() - { - - } - 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; } + 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", 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", 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; } - 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, "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, "Seattle")); + country.Add(new CountryDetails(9, "London")); + } + 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/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 0000000000..83ef95b683 Binary files /dev/null and b/blazor/datagrid/images/foreignkey-remote-data.png differ