diff --git a/blazor/datagrid/column-chooser.md b/blazor/datagrid/column-chooser.md index bd90bf9111..9c9a234c93 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) + { + this.OrderID = OrderID; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() { - public static List Orders = new List(); - public OrderData() + if (Order.Count == 0) { - + 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 OrderData(int? OrderID,string ShipCountry,double Freight,DateTime OrderDate) - { - this.OrderID = OrderID; - this.ShipCountry = ShipCountry; - this.Freight = Freight; - this.OrderDate = OrderDate; - } - - 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.ShipCountry = ShipCountry; - this.Freight = Freight; - this.OrderDate = OrderDate; - this.ShipCity = ShipCity; - } - - public static List GetAllRecords() + this.OrderID = OrderID; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipCountry = ShipCountry; + } + 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, "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; + 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 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.ShipCountry = ShipCountry; - this.Freight = Freight; - this.OrderDate = OrderDate; - this.ShipCity = ShipCity; - } - public static List GetAllRecords() + this.OrderID = OrderID; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipCountry = ShipCountry; + } + 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, "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; + 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 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 @@ -277,15 +260,14 @@ This can be demonstrated in the following sample: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using BlazorApp1.Data - + - - + + - - + + @code { - private SfGrid DefaultGrid; public string[] ToolbarItems = new string[] { "ColumnChooser" }; public List Orders { get; set; } protected override void OnInitialized() @@ -311,51 +291,48 @@ This can be demonstrated in the following sample: {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} 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.ShipCountry = ShipCountry; - this.Freight = Freight; - this.OrderDate = OrderDate; - this.ShipCity = ShipCity; - } - public static List GetAllRecords() + this.OrderID = OrderID; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipCountry = ShipCountry; + } + 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, "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; + 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 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/hjLgCMZLiJiGNLIf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrfsrWdrlMlVALs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Change default search operator of the column chooser @@ -368,16 +345,15 @@ Here’s an example of how to change the default search operator of the column c {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using BlazorApp1.Data - + - - + + @code { @@ -390,55 +366,49 @@ Here’s an example of how to change the default search operator of the column c } {% 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.ShipCountry = ShipCountry; - this.Freight = Freight; - this.OrderDate = OrderDate; - this.ShipCity = ShipCity; - } - public static List GetAllRecords() + this.OrderID = OrderID; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipCountry = ShipCountry; + } + 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, "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; + 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 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/LDhgsCXRrcwxcGEU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhfsrsLBUKAKYLo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Column chooser template @@ -446,12 +416,13 @@ Using the column chooser template, you can customize the column chooser dialog u ### Customize the content of column chooser - The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) tag in the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) component is used to customize the content in the column chooser dialog. You can type cast the context as [ColumnChooserTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserTemplateContext.html) to get columns inside content template. +The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) tag in the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) component is used to customize the content in the column chooser dialog. You can type cast the context as [ColumnChooserTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserTemplateContext.html) to get columns inside content template. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids; @using BlazorApp.Data + - @@ -476,21 +446,17 @@ Using the column chooser template, you can customize the column chooser dialog u - - @code { public SfGrid Grid { get; set; } @@ -506,10 +472,6 @@ Using the column chooser template, you can customize the column chooser dialog u public class OrderData { public static List Orders = new List(); - public OrderData() - { - - } public OrderData(int? OrderID, string CustomerID, double Freight, DateTime OrderDate, int? EmployeeID, string FirstName, string LastName, string Title, DateTime? HireDate) { this.OrderID = OrderID; @@ -551,7 +513,6 @@ Using the column chooser template, you can customize the column chooser dialog u public string LastName { get; set; } public string Title { get; set; } public DateTime? HireDate { get; set; } - } {% endhighlight %} {% highlight razor tabtitle="CustomComponent.razor" %} @@ -564,44 +525,35 @@ Using the column chooser template, you can customize the column chooser dialog u
- - - @code { public List CloneData { get; set; } = new List(); - [CascadingParameter] public SfGrid Grid { get; set; } - [Parameter] public ColumnChooserTemplateContext ColumnContext { get; set; } - public SfListView ListView { get; set; } - async Task OnInput(InputEventArgs eventArgs) { CloneData = DataSource.FindAll(e => e.Text.ToLower().StartsWith(eventArgs.Value.ToLower())); await Task.Delay(100); await Preselect(); } - protected override async Task OnInitializedAsync() { CloneData = DataSource; await Task.Delay(100); await Preselect(); } - List DataSource = new List { new DataModel() { Text = "Order ID", Id = "OrderID" }, @@ -614,7 +566,6 @@ Using the column chooser template, you can customize the column chooser dialog u new DataModel() { Text = "Title", Id = "Title"}, new DataModel() { Text = "Freight", Id = "Freight"}, }; - public async Task Preselect() { var cols = ColumnContext.Columns.FindAll(x => x.Visible == true).ToList(); @@ -631,12 +582,10 @@ Using the column chooser template, you can customize the column chooser dialog u } } } - public async Task OnCreated(List args) { await Preselect(); } - public async Task OnClicked(ClickEventArgs args) { if (args.IsChecked) @@ -663,16 +612,16 @@ namespace Model {% endhighlight %} {% endtabs %} -> You can build reusable custom component based on your customization need as like above code example. -
In the above example, Syncfusion® [ListView](https://blazor.syncfusion.com/documentation/listview/getting-started) component is used as custom component in the content template to show/hide columns. +> * You can build reusable custom component based on your customization need as like above code example. +> * In the above example, Syncfusion® [ListView](https://blazor.syncfusion.com/documentation/listview/getting-started) component is used as custom component in the content template to show/hide columns. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTXUszLlWhsBgB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLJiLVTWKyyPjml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Column chooser content template in Blazor DataGrid.](./images/blazor-datagrid-column-chooser-content-template.png) ### Customize the footer of column chooser - The [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_FooterTemplate) tag in the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) component is used to customize the footer in the column chooser dialog. You can type cast the context as [ColumnChooserFooterTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserFooterTemplateContext.html) to get columns inside FooterTemplate. +The [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_FooterTemplate) tag in the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) component is used to customize the footer in the column chooser dialog. You can type cast the context as [ColumnChooserFooterTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserFooterTemplateContext.html) to get columns inside FooterTemplate. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -707,7 +656,6 @@ namespace Model @code { public List GridData { get; set; } SfGrid grid { get; set; } - protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); @@ -717,11 +665,7 @@ namespace Model {% highlight c# tabtitle="OrderData.cs" %} public class OrderData { - public static List Orders = new List(); - public OrderData() - { - - } + public static List Orders = new List(); public OrderData(int? OrderID,string CustomerID,string ShipCountry,double Freight,DateTime OrderDate,DateTime ShippedDate,string ShipCity) { this.OrderID = OrderID; @@ -760,11 +704,8 @@ namespace Model public string ShipCountry { get; set; } public double Freight { get; set; } public string ShipCity { get; set; } - } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhUiMtVWQPZQjGs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhUiMtVWQPZQjGs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md index 2693f91b0b..5ccf0fbd79 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..cd550a4e18 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 | @@ -29,20 +27,18 @@ The default menu items are displayed in the following table, {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using BlazorApp1.Data - + - - - - + + + + @code { - public string[] MenuItems = new string[] { "Group", "Ungroup", "ColumnChooser", "Filter" }; public List Orders { get; set; } protected override void OnInitialized() { @@ -52,154 +48,314 @@ The default menu items are displayed in the following table, {% 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, string ShipCountry) { - public static List Orders = new List(); - public OrderData() - { - - } - public OrderData(int? OrderID, string CustomerID, DateTime OrderDate, double Freight,string ShipCity) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.ShipCity = ShipCity; - } - public static List GetAllRecords() + this.OrderID = OrderID; + this.Freight = Freight; + this.CustomerID = CustomerId; + this.ShipCity = ShipCity; + } + 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, "ALFKI",33.32, "Reims")); - Orders.Add(new OrderData(10249, "ANANTR",34.32, "Münster")); - Orders.Add(new OrderData(10250, "ANTON", 36.32, "Rio de Janeiro")); - Orders.Add(new OrderData(10251, "BLONP", 54.31, "Lyon")); - Orders.Add(new OrderData(10252, "BOLID",35.36, "Charleroi")); - Orders.Add(new OrderData(10253, "ANTON", 37.35, "Lyon")); - Orders.Add(new OrderData(10254, "BLONP", 33.32, "Rio de Janeiro")); - Orders.Add(new OrderData(10255, "BOLID", 76.74, "Münster")); - Orders.Add(new OrderData(10256, "ALFKI",55.43, "Reims")); - code += 5; - } - } - return Orders; + 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/hXLzMLWLKTPWHQcg?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 - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public double? Freight { get; set; } - public string ShipCity { get; set; } +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 Orders { get; set; } + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData +{ + public static List Order = new List(); + public OrderData(int OrderID, string CustomerId, string Shipcity, double Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.ShipCity = Shipcity; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderData(10248, "VINET", "Reims", 32.38)); + Order.Add(new OrderData(10249, "TOMSP", "Münster", 11.61)); + Order.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", 65.83)); + Order.Add(new OrderData(10251, "VICTE", "Lyon", 41.34)); + Order.Add(new OrderData(10252, "SUPRD", "Charleroi", 51.3)); + Order.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", 58.17)); + Order.Add(new OrderData(10254, "CHOPS", "Bern", 22.98)); + Order.Add(new OrderData(10255, "RICSU", "Genève", 148.33)); + Order.Add(new OrderData(10256, "WELLI", "Resende", 13.97)); + Order.Add(new OrderData(10257, "HILAA", "San Cristóbal", 81.91)); + Order.Add(new OrderData(10258, "ERNSH", "Graz", 140.51)); + Order.Add(new OrderData(10259, "CENTC", "México D.F.", 3.25)); + Order.Add(new OrderData(10260, "OTTIK", "Köln", 55.09)); + Order.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", 3.05)); + Order.Add(new OrderData(10262, "RATTC", "Albuquerque", 48.29)); + } + return Order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public double Freight { get; set; } +} {% 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" %} +{% 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. -In the following sample, Order ID, Order Date, and Freight columns are sorted at initial rendering. When clicking the custom column menu item in the OrderID column, sorting will be cleared using the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method in the `ColumnMenuItemClicked` event. +Consider the following example, which demonstrates how to add a custom column menu item to clear the sorting and grouping of the Grid using the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) and [ClearGroupingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearGroupingAsync) method in the `ColumnMenuItemClicked` event: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using BlazorApp1.Data - + - - - + + - - - - + + + + @code { private SfGrid Grid; - public List columns = new List() { "OrderID" }; - + public string[] InitialGrouping = (new string[] { "Freight" }); + public List MenuItems = new List() { + new ColumnMenuItemModel { Text = "Clear Sorting", Id = "sort" }, + new ColumnMenuItemModel { Text = "Clear Grouping", Id = "group" } + }; public List Orders { get; set; } - + protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } public void ColumnMenuItemClickedHandler(ColumnMenuClickEventArgs args) { - Grid.ClearSortingAsync(columns); + switch (args.Item.Id) + { + case "sort": + Grid.ClearSortingAsync(); + break; + case "group": + Grid.ClearGroupingAsync(); + break; + } } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData +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() { - public static List Orders = new List(); - - - public OrderData() + 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")); } - public OrderData(int? OrderID, string CustomerID, DateTime OrderDate, double Freight,string ShipCity) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.OrderDate = OrderDate; - this.Freight = Freight; - this.ShipCity = ShipCity; + return Order; + } + public int OrderID { get; set; } + public double Freight { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } +} +{% endhighlight %} +{% endtabs %} - } - public static List GetAllRecords() +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVJMrMgCLBDWpXz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customize menu items for particular columns + +Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the [MenuItem.Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property as **true** in the [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen) event. + +The following sample, **Filter** item was hidden in column menu when opens for the **OrderID** column. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + +@code { + private SfGrid DefaultGrid; + public List Orders { get; set; } + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } + public void OnColumnMenuOpenHandler(ColumnMenuOpenEventArgs args) + { + foreach (var item in args.Items) { - if (Orders.Count() == 0) + // Hide the "Filter" option for the "OrderID" column + if (item.Text == "Filter" && args.Column.Field == "OrderID") { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "ALFKI",new DateTime(1996,07,08),33.32)); - Orders.Add(new OrderData(10249, "ANANTR", new DateTime(1996,07,09),34.32)); - Orders.Add(new OrderData(10250, "ANTON", new DateTime(1996,07,10),36.32)); - Orders.Add(new OrderData(10251, "BLONP", new DateTime(1996,07,11),54.31)); - Orders.Add(new OrderData(10252, "BOLID", new DateTime(1996,07,12),35.36)); - Orders.Add(new OrderData(10253, "ANTON", new DateTime(1996,07,13),37.35)); - Orders.Add(new OrderData(10254, "BLONP", new DateTime(1996,07,14),33.32)); - Orders.Add(new OrderData(10255, "BOLID", new DateTime(1996,07,15),76.74)); - Orders.Add(new OrderData(10256, "ALFKI",new DateTime(1996,07,16),55.43)); - code += 5; - } + item.Hidden = true; + } + else + { + item.Hidden = false; } - return Orders; } - - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } } +} +{% 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, string ShipCountry) + { + this.OrderID = OrderID; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.CustomerID = CustomerId; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderData(10248, 32.38, "VINET", "Reims", "Australia")); + Order.Add(new OrderData(10249, 11.61, "TOMSP", "Münster", "Australia")); + Order.Add(new OrderData(10250, 65.83, "HANAR", "Rio de Janeiro", "United States")); + Order.Add(new OrderData(10251, 41.34, "VICTE", "Lyon", "Australia")); + Order.Add(new OrderData(10252, 51.3, "SUPRD", "Charleroi","United States")); + Order.Add(new OrderData(10253, 58.17, "HANAR", "Rio de Janeiro","United States")); + Order.Add(new OrderData(10254, 22.98, "CHOPS", "Bern", "Switzerland")); + Order.Add(new OrderData(10255, 148.33, "RICSU", "Genève", "Switzerland")); + Order.Add(new OrderData(10256, 13.97, "WELLI", "Resende", "Brazil")); + Order.Add(new OrderData(10257, 81.91, "HILAA", "San Cristóbal", "Venezuela")); + Order.Add(new OrderData(10258, 140.51, "ERNSH", "Graz", "Austria")); + Order.Add(new OrderData(10259, 3.25, "CENTC", "México D.F.", "Mexico")); + Order.Add(new OrderData(10260, 55.09, "OTTIK", "Köln", "Germany")); + Order.Add(new OrderData(10261, 3.05, "QUEDE", "Rio de Janeiro", "Brazil")); + Order.Add(new OrderData(10262, 48.29, "RATTC", "Albuquerque", "USA")); + } + return Order; + } + public int OrderID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string CustomerID { get; set; } + public string ShipCountry { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhUXdrXJoJxsVyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrJWVWUgqiNTWDr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Render nested column menu The nested column menu feature provides an extended menu option in the grid column headers, allows you to access additional actions and options related to the columns. -To enable the nested column menu feature, you need to define the **ColumnMenuItems** property in your component. The `ColumnMenuItems` property is an array that contains the items for the column menu. Each item can be a string representing a built-in menu item or an object defining a custom menu item. +To enable the nested column menu feature, you need to define the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ContextMenuItems) property in your component. The `ColumnMenuItems` property is an array that contains the items for the column menu. Each item can be a string representing a built-in menu item or an object defining a custom menu item. Here is an example of how to configure the `ColumnMenuItems` property to include a nested menu: @@ -207,9 +363,8 @@ Here is an example of how to configure the `ColumnMenuItems` property to include {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations -@using BlazorApp1.Data - + @@ -235,7 +390,6 @@ Here is an example of how to configure the `ColumnMenuItems` property to include if (args.Item.Text == "Group") { DefaultGrid.GroupColumnAsync("CustomerID"); - } else if (args.Item.Text == "UnGroup") { @@ -258,52 +412,42 @@ Here is an example of how to configure the `ColumnMenuItems` property to include } {% 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.ShipCountry = ShipCity; - - } - public static List GetAllRecords() + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.Freight = Freight; + this.ShipCountry = 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 ShipCountry { get; set; } - - + return Orders; } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public double? Freight { get; set; } + public string ShipCountry { get; set; } +} {% endhighlight %} {% endtabs %} @@ -311,14 +455,14 @@ Here is an example of how to configure the `ColumnMenuItems` property to include To customize the column menu icon, you need to override the default grid class `.e-icons.e-columnmenu` with a custom CSS property called **content**. By specifying a Unicode character or an icon font’s CSS class, you can change the icon displayed in the column menu. -1.Add the necessary CSS code to override the default grid class: +1. Add the necessary CSS code to override the default grid class: ```css .e-grid .e-columnheader .e-icons.e-columnmenu::before { content: "\e99a"; } ``` -2.Import the required icon stylesheets. You can use either the material or bootstrap5 style, depending on your preference. Add the following code to import the stylesheets: +2. Import the required icon stylesheets. You can use either the material or bootstrap5 style, depending on your preference. Add the following code to import the stylesheets: ```css @@ -329,9 +473,6 @@ Here is an example that demonstrates how to customize the column menu icon in th {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Navigations -@using Syncfusion.Blazor.Grids -@using BlazorApp1.Data @@ -347,8 +488,7 @@ Here is an example that demonstrates how to customize the column menu icon in th content: "\e99a"; } -@code { - +@code { public List Orders { get; set; } protected override void OnInitialized() { @@ -357,239 +497,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. - - - - - +{% 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 47d40dd015..5f6e5489e0 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -359,8 +359,7 @@ public class OrderDetails this.OrderID = OrderID; this.CustomerID = CustomerId; this.Freight = Freight; - this.OrderStatus = Orderstatus; - + this.OrderStatus = Orderstatus; } public static List GetAllRecords() { @@ -392,12 +391,11 @@ public class OrderDetails {% endhighlight %} {% endtabs %} - {% previewsample "https://blazorplayground.syncfusion.com/embed/LNBJCrtKzUHwTXIk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### 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