diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md index 08c9065bd2..c792585ba1 100644 --- a/blazor/datagrid/filter-menu.md +++ b/blazor/datagrid/filter-menu.md @@ -843,6 +843,81 @@ You can prevent autofill feature by setting the [Autofill](https://help.syncfusi {% previewsample "https://blazorplayground.syncfusion.com/embed/BtBpXMrazUJxtJCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +## Hide default filter icons while perform filtering through method + +When performing filtering programmatically using methods in the Syncfusion Blazor DataGrid, the default filter icons in the column headers can be hidden to simplify the user interface. + +To customize the filter icon in the Grid, use the display property of the filtermenu as mentioned below: + +```cshtml + +``` + +The following example demonstrates how to filter the **CustomerID** column programmatically and hide the default filter icons: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +Filter Customer ID Column + Clear Filter + + + + + + + + + + + +@code { + public List Orders { get; set; } + SfGrid Grid; + protected override void OnInitialized() + { + var customerIds = new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID", "ECHO", "CHARLIE", "DELTA", "FOXTROT", "GOLF", "HOTEL", "INDIA", "JULIET" }; + Orders = Enumerable.Range(1, 12).Select(x => new Order() + { + OrderID = 1000 + x, + CustomerID = customerIds[x % customerIds.Length], + Freight = 2.1 * x, + OrderDate = DateTime.Now.AddDays(-x), + }).ToList(); + } + + public class Order + { + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } + } + public async Task filterAction() + { + await Grid.FilterByColumnAsync("CustomerID", "equal", "ECHO"); + } + public async Task clearFilter() + { + await Grid.ClearFilteringAsync(); + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBpXMrazUJxtJCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Filter menu events The Syncfusion® Blazor Grid offers the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering), [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered), [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) and [FilterDialogOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpened) events, which provide information about the actions being performed. diff --git a/blazor/datagrid/searching.md b/blazor/datagrid/searching.md index 88b82c4356..e0ef269905 100644 --- a/blazor/datagrid/searching.md +++ b/blazor/datagrid/searching.md @@ -878,6 +878,4 @@ The following example demonstrates how to clear the searched records using an ex {% previewsample "https://blazorplayground.syncfusion.com/embed/BZVzjpXoqkaJnBKx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> You can also clear the searched records by using the clear icon within the search input field. - - +> You can also clear the searched records by using the clear icon within the search input field. \ No newline at end of file