diff --git a/blazor/datagrid/excel-like-filter.md b/blazor/datagrid/excel-like-filter.md index 0842b83d62..377fb00637 100644 --- a/blazor/datagrid/excel-like-filter.md +++ b/blazor/datagrid/excel-like-filter.md @@ -7,174 +7,664 @@ control: DataGrid documentation: ug --- -# Excel Like Filter in Blazor DataGrid Component +# Excel like filter in Blazor Grid component -You can enable Excel like filter by defining [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) as **Excel**. The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering. +The Syncfusion Grid component offers an Excel-like filter feature, providing a familiar and user-friendly interface for filtering data within the grid. This feature simplifies complex filtering operations on specific columns, allowing for quick data location and manipulation, similar to Microsoft Excel. Excel like filtering is especially useful when dealing with large datasets and complex filtering requirements. -```cshtml +Here is an example that showcasing how to render the excel like filter within the Syncfusion Blazor Grid: + + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - - - - - - - + + + + + + + + + + -@code{ - public List Orders { get; set; } +@code { + + public List GridData { get; set; } + SfGrid? Grid { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() + GridData = OrderData.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData + { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3), })[new Random().Next(3)], - }).ToList(); + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int OrderID = 10248; + + for (int i = 1; i < 3; i++) + { + Orders.Add(new OrderData(OrderID + 1, "VINET", new DateTime(1996, 07, 06), 32.38)); + Orders.Add(new OrderData(OrderID + 2, "TOMSP", new DateTime(1996, 07, 06), 11.61)); + Orders.Add(new OrderData(OrderID + 3, "HANAR", new DateTime(1996, 07, 06), 65.83)); + Orders.Add(new OrderData(OrderID + 4, "VICTE", new DateTime(1996, 07, 06), 45.78)); + Orders.Add(new OrderData(OrderID + 5, "SUPRD", new DateTime(1996, 07, 06), 98.6)); + Orders.Add(new OrderData(OrderID + 6, "HANAR", new DateTime(1996, 07, 06), 103.45)); + Orders.Add(new OrderData(OrderID + 7, "CHOPS", new DateTime(1996, 07, 06), 103.45)); + Orders.Add(new OrderData(OrderID + 8, "RICSU", new DateTime(1996, 07, 06), 112.48)); + Orders.Add(new OrderData(OrderID + 9, "WELLI", new DateTime(1996, 07, 06), 33.45)); + OrderID += 9; + + } + } + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } + } +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthfDsKDhZjsizFd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> * The Excel-like filter feature supports various filter conditions, including text-based, number-based, date-based, and boolean-based filters. +> * The filter dialog provides additional options, such as searching for specific values, and clearing applied filters. + +## Checkbox filtering + +The checkbox filtering feature in Syncfusion Blazor Grid enables you to filter data based on checkbox selections within a column. This powerful filtering option simplifies the process of narrowing down data, providing a more efficient and user-friendly experience. The check box filter feature is particularly useful when dealing with columns containing categorical data. + +Here is an example that showcasing how to render the check box filter within the Syncfusion Blazor Grid: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + +@code { + + public List GridData { get; set; } + SfGrid? Grid { get; set; } + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData + { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int OrderID = 10248; + + for (int i = 1; i < 3; i++) + { + Orders.Add(new OrderData(OrderID + 1, "VINET", new DateTime(1996, 07, 06), 32.38)); + Orders.Add(new OrderData(OrderID + 2, "TOMSP", new DateTime(1996, 07, 06), 11.61)); + Orders.Add(new OrderData(OrderID + 3, "HANAR", new DateTime(1996, 07, 06), 65.83)); + Orders.Add(new OrderData(OrderID + 4, "VICTE", new DateTime(1996, 07, 06), 45.78)); + Orders.Add(new OrderData(OrderID + 5, "SUPRD", new DateTime(1996, 07, 06), 98.6)); + Orders.Add(new OrderData(OrderID + 6, "HANAR", new DateTime(1996, 07, 06), 103.45)); + Orders.Add(new OrderData(OrderID + 7, "CHOPS", new DateTime(1996, 07, 06), 103.45)); + Orders.Add(new OrderData(OrderID + 8, "RICSU", new DateTime(1996, 07, 06), 112.48)); + Orders.Add(new OrderData(OrderID + 9, "WELLI", new DateTime(1996, 07, 06), 33.45)); + OrderID += 9; + } + } + return Orders; + } - public class Order { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthJNsUjzlaVEAhW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customize the filter choice count + +By default, the filter choice count is set to 1000, which means that the filter dialog will display a maximum of 1000 distinct values for each column as a checkbox list data. This default value ensures that the filter operation remains efficient, even with large datasets. Additionally, the filter dialog retrieves and displays distinct data from the first 1000 records bind to the Grid to optimize performance, while the remaining records are returned as a result of the search option within the filter dialog. + +The Grid component allows you to customize the number of distinct data displayed in the checkbox list of the excel/checkbox type filter dialog. This can be useful when you want to customize the default filter choice count values while using large datasets. + +However, you have the flexibility to increase or decrease the filter choice count based on your specific requirements. This can be achieved by adjusting the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Grids_FilterDialogOpeningEventArgs_FilterChoiceCount) value. + +The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog. In the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event, you can set the `FilterChoiceCount` property to the desired value. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code { + public List GridData { get; set; } + + SfGrid? Grid { get; set; } + + public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) + { + args.FilterChoiceCount = 3000; + } + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } } +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData + { + public static List Orders = new List(); -``` -The following screenshot represents Excel filter -![Blazor DataGrid with Excel Filter](./images/blazor-datagrid-excel-filter.png) + public OrderData() + { -The following screenshot represents Custom filter in Excel filter -![Blazor DataGrid Custom Excel Filter](./images/blazor-datagrid-custom-excel-filter.png) + } + public OrderData(int? OrderID, string CustomerID, string ProductName, string Quantity) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ProductName = ProductName; + this.Quantity = Quantity; + } -## Filter item template + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + string[] Product = {"Chai", "Chang", "Aniseed Syrup", "Chef Anton\"s Cajun Seasoning", "Chef Anton\"s Gumbo Mix", "Grandma\"s Boysenberry Spread", + "Uncle Bob\"s Organic Dried Pears", "Northwoods Cranberry Sauce", "Mishi Kobe Niku", "Ikura", "Queso Cabrales", "Queso Manchego La Pastora", "Konbu", + "Tofu", "Genen Shouyu", "Pavlova", "Alice Mutton", "Carnarvon Tigers", "Teatime Chocolate Biscuits", "Sir Rodney\"s Marmalade", "Sir Rodney\"s Scones", + "Gustaf\"s Knäckebröd", "Tunnbröd", "Guaraná Fantástica", "NuNuCa Nuß-Nougat-Creme", "Gumbär Gummibärchen", "Schoggi Schokolade", "Rössle Sauerkraut", + "Thüringer Rostbratwurst", "Nord-Ost Matjeshering", "Gorgonzola Telino", "Mascarpone Fabioli", "Geitost", "Sasquatch Ale", "Steeleye Stout", "Inlagd Sill", + "Gravad lax", "Côte de Blaye", "Chartreuse verte", "Boston Crab Meat", "Jack\"s New England Clam Chowder", "Singaporean Hokkien Fried Mee", "Ipoh Coffee", + "Gula Malacca", "Rogede sild", "Spegesild", "Zaanse koeken", "Chocolade", "Maxilaku", "Valkoinen suklaa", "Manjimup Dried Apples", "Filo Mix", "Perth Pasties", + "Tourtière", "Pâté chinois", "Gnocchi di nonna Alice", "Ravioli Angelo", "Escargots de Bourgogne", "Raclette Courdavault", "Camembert Pierrot", "Sirop d\"érable", + "Tarte au sucre", "Vegie-spread", "Wimmers gute Semmelknödel", "Louisiana Fiery Hot Pepper Sauce", "Louisiana Hot Spiced Okra", "Laughing Lumberjack Lager", "Scottish Longbreads", + "Gudbrandsdalsost", "Outback Lager", "Flotemysost", "Mozzarella di Giovanni", "Röd Kaviar", "Longlife Tofu", "Rhönbräu Klosterbier", "Lakkalikööri", "Original Frankfurter grüne Soße"}; + + + string[] Quantity = {"10 boxes x 20 bags", "24 - 12 oz bottles", "12 - 550 ml bottles", "48 - 6 oz jars", "36 boxes", "12 - 8 oz jars", "12 - 1 lb pkgs.", "12 - 12 oz jars", "18 - 500 g pkgs.", "12 - 200 ml jars", + "1 kg pkg.", "10 - 500 g pkgs.", "2 kg box", "40 - 100 g pkgs.", "24 - 250 ml bottles", "32 - 500 g boxes", "20 - 1 kg tins", "16 kg pkg.", "10 boxes x 12 pieces", "30 gift boxes", "24 pkgs. x 4 pieces", "24 - 500 g pkgs.", "12 - 250 g pkgs.", + "12 - 355 ml cans", "20 - 450 g glasses", "100 - 250 g bags" }; + + string[] CustomerID = {"VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "HANAR", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH", "CENTC", + "OTTIK", "QUEDE", "RATTC", "ERNSH", "FOLKO", "BLONP", "WARTH", "FRANK", "GROSR", "WHITC", "WARTH", "SPLIR", "RATTC", "QUICK", "VINET", + "MAGAA", "TORTU", "MORGK", "BERGS", "LEHMS", "BERGS", "ROMEY", "ROMEY", "LILAS", "LEHMS", "QUICK", "QUICK", "RICAR", "REGGC", "BSBEV", + "COMMI", "QUEDE", "TRADH", "TORTU", "RATTC", "VINET", "LILAS", "BLONP", "HUNGO", "RICAR", "MAGAA", "WANDK", "SUPRD", "GODOS", "TORTU", + "OLDWO", "ROMEY", "LONEP", "ANATR", "HUNGO", "THEBI", "DUMON", "WANDK", "QUICK", "RATTC", "ISLAT", "RATTC", "LONEP", "ISLAT", "TORTU", + "WARTH", "ISLAT", "PERIC", "KOENE", "SAVEA", "KOENE", "BOLID", "FOLKO", "FURIB", "SPLIR", "LILAS", "BONAP", "MEREP", "WARTH", "VICTE", + "HUNGO", "PRINI", "FRANK", "OLDWO", "MEREP", "BONAP", "SIMOB", "FRANK", "LEHMS", "WHITC", "QUICK", "RATTC", "FAMIA"}; + + + int OrderID = 10248; + int i = 0; int j = 0; int k = 0; int l = 0; int m = 0; + for (int x = 0; x < 25000; x++) + { + i = i >= CustomerID.Length ? 0 : i; + l = l >= Product.Length ? 0 : l; + k = k >= Quantity.Length ? 0 : k; + Orders.Add(new OrderData() + { + OrderID = OrderID + x, + CustomerID = CustomerID[i], + ProductName = Product[l], + Quantity = Quantity[k], + + }); + i++; j++; k++; l++; + } -This **`FilterItemTemplate`** helps to customize each CheckBox list element or value for display purposes. To access the checkbox list values inside the `FilterItemTemplate`, you can use the implicit named parameter context. You can type cast the context as [FilterItemTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterItemTemplateContext.html) to get list values inside template. + } + return Orders; + } -```cshtml + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ProductName { get; set; } + public string Quantity { get; set; } + } +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVfXVjhBrOeigOb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> The specified filter choice count value determines the display of unique items as a checkbox list in the Excel/Checkbox type filter dialog. This can result in a delay in rendering these checkbox items when opening the filter dialog. Therefore, it is advisable to set a restricted filter choice count value. + +## Show customized text in checkbox list data + +The Syncfusion Angular Grid component provides you with the flexibility to customize the text displayed in the Excel/Checkbox filtering options. This allows you to modify the default text and provide more meaningful and contextual labels for the filtering. + +To customize the text in the Excel/Checkbox filter, you can define a `FilterItemTemplate` and bind it to the desired column. The `FilterItemTemplate` property allows you to create custom templates for filter items. You can use any logic and HTML elements within this template to display the desired text or content. + +In the example below, you can see how you can customize the text displayed in the filter checkbox list for the **Delivered** column. This is achieved by defining a `FilterItemTemplate` within the element for that specific column. Inside the template, you can use Angular's template syntax to conditionally display **Delivered** if the data value is true and **Not delivered** if the value is false. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - + + + - - + + @{ var filterContext = (context as FilterItemTemplateContext); - var itemTemplateValue = "Textof(" + filterContext.Value + ")"; + var itemTemplateValue = "DefaultText"; + + if (filterContext.Value.ToString() == "False") + { + itemTemplateValue = "Not delivered"; + } + else + { + itemTemplateValue = "Delivered"; + } } @itemTemplateValue + - - + + -@code{ - public List Orders { get; set; } +@code { + + public List GridData { get; set; } + + SfGrid Grid; protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() + GridData = OrderData.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + public class OrderData + { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(string CategoryName, bool Delivered, int? ProductID) { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3), })[new Random().Next(3)], - }).ToList(); + this.CategoryName = CategoryName; + this.Delivered = Delivered; + this.ProductID = ProductID; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int ProductID = 0; + for (int i = 1; i < 7; i++) + { + Orders.Add(new OrderData("Beverages", true, ProductID + 1)); + Orders.Add(new OrderData("Condiments", false, ProductID + 2)); + Orders.Add(new OrderData("Confections", false, ProductID + 3)); + Orders.Add(new OrderData("DairyProducts", true, ProductID + 4)); + Orders.Add(new OrderData("Grains", true, ProductID + 5)); + Orders.Add(new OrderData("Meat", false, ProductID + 6)); + Orders.Add(new OrderData("Produce", true, ProductID + 7)); + Orders.Add(new OrderData("Seafood", true, ProductID + 8)); + Orders.Add(new OrderData("Confections", false, ProductID + 9)); + ProductID += 9; + } + } + return Orders; + } + + public string CategoryName { get; set; } + public bool Delivered { get; set; } + public int? ProductID { get; set; } } +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVzDrNsbrIRILzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Show template in checkbox list data + +The `FilterItemTemplate` property in the Syncfusion Blazor Grid allows you to customize the appearance of filter items in the grid’s filter checkbox list for a specific column. This property is useful when you want to provide a custom UI or additional information within the filter checkbox list, such as icons, text, or any HTML elements, alongside the default filter items. + +In this example, you can see how to use the `FilterItemTemplate` to render icons along with the category names in the filter checkbox list for the **CategoryName** column. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + @{ + var filterContext = context as FilterItemTemplateContext; + + if (filterContext.Value.ToString() == "Beverages") + { + + + @filterContext.Value.ToString() + ; + } + else if (filterContext.Value.ToString() == "Condiments") + { + + + @filterContext.Value.ToString() + ; + } + else if (filterContext.Value.ToString() == "Confections") + { + + + @filterContext.Value.ToString() + ; + } + else if (filterContext.Value.ToString() == "DairyProducts") + { + @filterContext.Value.ToString() + ; + } + else if (filterContext.Value.ToString() == "Grains") + { + + + @filterContext.Value.ToString() + ; + } + else if (filterContext.Value.ToString() == "Meat") + { + + + @filterContext.Value.ToString() + ; + } + else if (filterContext.Value.ToString() == "Produce") + { + + + @filterContext.Value.ToString() + ; + } + else if (filterContext.Value.ToString() == "Seafood") + { + + + @filterContext.Value.ToString() + ; + } + } + + + + + + + + +@code { - public class Order + public List GridData { get; set; } + + SfGrid Grid; + + protected override void OnInitialized() { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + GridData = OrderData.GetAllRecords(); } } -``` +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + public class OrderData + { + public static List Orders = new List(); -![Blazor DataGrid Filter with Item Template](./images/blazor-datagrid-filter-item-template.png) + public OrderData() + { -## Customize filter icon for filtered columns + } + public OrderData(string CategoryName, bool Discontinued, int? ProductID) + { + this.CategoryName = CategoryName; + this.Discontinued = Discontinued; + this.ProductID = ProductID; + } -After filtering the column, the DataGrid will display the in-built filtered icon with predefined styles by default. The filtered icon can also be customized using .e-grid .e-filtered::before class. + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int ProductID = 0; + for (int i = 1; i < 7; i++) + { + Orders.Add(new OrderData("Beverages", true, ProductID + 1)); + Orders.Add(new OrderData("Condiments", false, ProductID + 2)); + Orders.Add(new OrderData("Confections", false, ProductID + 3)); + Orders.Add(new OrderData("DairyProducts", true, ProductID + 4)); + Orders.Add(new OrderData("Grains", true, ProductID + 5)); + Orders.Add(new OrderData("Meat", false, ProductID + 6)); + Orders.Add(new OrderData("Produce", true, ProductID + 7)); + Orders.Add(new OrderData("Seafood", true, ProductID + 8)); + Orders.Add(new OrderData("Confections", false, ProductID + 9)); + ProductID += 9; + } + } + return Orders; + } + + public string CategoryName { get; set; } + public bool Discontinued { get; set; } + public int? ProductID { get; set; } + } +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVJjrZhhSCSEboQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customize the excel filter dialog using CSS + +In the Syncfusion Blazor Grid, you have the flexibility to enhance the visual presentation of the excel filter dialog. This can be achieved by utilizing CSS styles to modify the dialog’s appearance according to the specific needs and aesthetics of your application. + +**Removing context menu option** + +The excel filter dialog includes several features such as **context menu**, **search box**, and c**heckbox list** that may not be required in some scenarios. You can remove these options using the className attribute in the grid component. ```cshtml + +``` +The following example demonstrates how to remove the context menu option in the excel filter dialog using above mentioned CSS + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + + - - - - + + + + + -@code{ - public List Orders { get; set; } + + +@code { + + public List GridData { get; set; } + SfGrid? Grid { get; set; } + protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3), })[new Random().Next(3)], - }).ToList(); + GridData = OrderData.GetAllRecords(); } - public class Order +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int OrderID = 10248; + + for (int i = 1; i < 3; i++) + { + Orders.Add(new OrderData(OrderID + 1, "VINET", new DateTime(1996, 07, 06), 32.38)); + Orders.Add(new OrderData(OrderID + 2, "TOMSP", new DateTime(1996, 07, 06), 11.61)); + Orders.Add(new OrderData(OrderID + 3, "HANAR", new DateTime(1996, 07, 06), 65.83)); + Orders.Add(new OrderData(OrderID + 4, "VICTE", new DateTime(1996, 07, 06), 45.78)); + Orders.Add(new OrderData(OrderID + 5, "SUPRD", new DateTime(1996, 07, 06), 98.6)); + Orders.Add(new OrderData(OrderID + 6, "HANAR", new DateTime(1996, 07, 06), 103.45)); + Orders.Add(new OrderData(OrderID + 7, "CHOPS", new DateTime(1996, 07, 06), 103.45)); + Orders.Add(new OrderData(OrderID + 8, "RICSU", new DateTime(1996, 07, 06), 112.48)); + Orders.Add(new OrderData(OrderID + 9, "WELLI", new DateTime(1996, 07, 06), 33.45)); + OrderID += 9; + } + } + return Orders; + } + public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } -} +{% endhighlight %} +{% endtabs %} - +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVJZhtsFqnfgvJa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -``` +**Customize the height and width of filter popup** -![Blazor DataGrid Customized Filtered Icon](./images/blazor-datagrid-custom-filtered-icon.png) +You can customize the height and width of each column’s filter dialog using the CSS style in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event of the Grid. -## Customize the height and width of filter popup +Before opening a filter dialog for each column, the `FilterDialogOpening` event will be triggered. At that point, based on the boolean value, we have set the height and width of the CustomerID and OrderDate columns using the CSS style in the following sample. -You can customize the height and width of each column’s filter dialog using the CSS style in the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event of the Grid. - -Before opening a filter dialog for each column, the `OnActionBegin` event will be triggered with the [RequestType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ActionEventArgs-1.html#Syncfusion_Blazor_Grids_ActionEventArgs_1_RequestType) argument as `FilterBeforeOpen`. At that point, based on the boolean value, we have set the height and width of the CustomerID and OrderDate columns using the CSS style in the following sample. - -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - - + + + + - - - - + + + + + -@if(IsLarge) +@if (IsLarge) { } -@if(IsSmall) +@if (IsSmall) { + } -@code{ - public List Orders { get; set; } +@code { + + public List GridData { get; set; } + SfGrid? Grid { get; set; } public bool IsLarge { get; set; } = false; public bool IsSmall { get; set; } = false; - public void OnActionBegin(ActionEventArgs Args) + + protected override void OnInitialized() { - if (Args.RequestType == Syncfusion.Blazor.Grids.Action.FilterBeforeOpen) + GridData = OrderData.GetAllRecords(); + } + + public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) + { + if (args.ColumnName == "CustomerID") { - if(Args.ColumnName == "CustomerID") - { - IsLarge = true; - IsSmall = false; - } - else if(Args.ColumnName == "OrderDate") - { - IsSmall = true; - IsLarge = false; - } - else + IsLarge = true; + IsSmall = false; + } + else if (args.ColumnName == "OrderDate") + { + IsSmall = true; + IsLarge = false; + } + else + { + IsLarge = false; + IsSmall = false; + } + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData + { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) { - IsLarge = false; - IsSmall = false; + int OrderID = 10248; + + for (int i = 1; i < 3; i++) + { + Orders.Add(new OrderData(OrderID + 1, "VINET", new DateTime(1996, 07, 06), 32.38)); + Orders.Add(new OrderData(OrderID + 2, "TOMSP", new DateTime(1996, 07, 06), 11.61)); + Orders.Add(new OrderData(OrderID + 3, "HANAR", new DateTime(1996, 07, 06), 65.83)); + Orders.Add(new OrderData(OrderID + 4, "VICTE", new DateTime(1996, 07, 06), 45.78)); + Orders.Add(new OrderData(OrderID + 5, "SUPRD", new DateTime(1996, 07, 06), 98.6)); + Orders.Add(new OrderData(OrderID + 6, "HANAR", new DateTime(1996, 07, 06), 103.45)); + Orders.Add(new OrderData(OrderID + 7, "CHOPS", new DateTime(1996, 07, 06), 103.45)); + Orders.Add(new OrderData(OrderID + 8, "RICSU", new DateTime(1996, 07, 06), 112.48)); + Orders.Add(new OrderData(OrderID + 9, "WELLI", new DateTime(1996, 07, 06), 33.45)); + OrderID += 9; + } } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } } +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBpZBDBCFDseVPP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customize filter icon for filtered columns + +After filtering the column, the DataGrid will display the in-built filtered icon with predefined styles by default. The filtered icon can also be customized using .e-grid .e-filtered::before class. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + +@code { + + public List GridData { get; set; } + SfGrid? Grid { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKII", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3), })[new Random().Next(3)], - }).ToList(); + GridData = OrderData.GetAllRecords(); } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData + { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int OrderID = 10248; + + for (int i = 1; i < 3; i++) + { + Orders.Add(new OrderData(OrderID + 1, "VINET", new DateTime(1996, 07, 06), 32.38)); + Orders.Add(new OrderData(OrderID + 2, "TOMSP", new DateTime(1996, 07, 06), 11.61)); + Orders.Add(new OrderData(OrderID + 3, "HANAR", new DateTime(1996, 07, 06), 65.83)); + Orders.Add(new OrderData(OrderID + 4, "VICTE", new DateTime(1996, 07, 06), 45.78)); + Orders.Add(new OrderData(OrderID + 5, "SUPRD", new DateTime(1996, 07, 06), 98.6)); + Orders.Add(new OrderData(OrderID + 6, "HANAR", new DateTime(1996, 07, 06), 103.45)); + Orders.Add(new OrderData(OrderID + 7, "CHOPS", new DateTime(1996, 07, 06), 103.45)); + Orders.Add(new OrderData(OrderID + 8, "RICSU", new DateTime(1996, 07, 06), 112.48)); + Orders.Add(new OrderData(OrderID + 9, "WELLI", new DateTime(1996, 07, 06), 33.45)); + OrderID += 9; + } + } + return Orders; + } - public class Order { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } -} - -``` +{% endhighlight %} +{% endtabs %} -![Customize the Height and Width of Filter Popup in Blazor DataGrid](./images/blazor-datagrid-customize-filter-popup.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNLDBsuTLPqvx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/blazor-datagrid-customize-filter-popup-using-css) N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data. \ No newline at end of file