From a7280e2738a1e241d903fb9ee33003b1de51d006 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Mon, 21 Apr 2025 10:56:09 +0530 Subject: [PATCH 1/3] 952842: Added the topic of Hide default filter icons while perform filtering through method --- blazor/datagrid/filter-menu.md | 75 ++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md index 08c9065bd2..3d24c21a98 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 hide the filter icon, use the following CSS targeting the filter icon element: + +```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. From 74a0926496ddaea788b45dabed3aa6196c75c793 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Wed, 23 Apr 2025 15:15:04 +0530 Subject: [PATCH 2/3] Added the topic of Retrieving searched records using a button click --- blazor/datagrid/searching.md | 79 ++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) diff --git a/blazor/datagrid/searching.md b/blazor/datagrid/searching.md index 88b82c4356..8c3eaf70df 100644 --- a/blazor/datagrid/searching.md +++ b/blazor/datagrid/searching.md @@ -880,4 +880,83 @@ The following example demonstrates how to clear the searched records using an ex > You can also clear the searched records by using the clear icon within the search input field. +## Retrieving searched records using a button click +The Syncfusion Blazor DataGrid allows users to retrieve searched records using an external button. This functionality enables capturing the search text entered in the toolbar and filtering the data manually from the original data source. + +To achieve this, the [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionComplete) event can be used. This event is triggered when a search action is performed, allowing access to the search text. The captured search string can then be used to manually filter the original data source and retrieve the matching records. + +The following example demonstrates how to retrieve searched records using an external button. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + public List ToolbarItems = new List() { "Search"}; + public List SearchedOrders { get; set; } = new(); + private string LastSearchString = string.Empty; + protected override void OnInitialized() + { + Orders = Enumerable.Range(1, 12).Select(x => new Order() + { + OrderID = 1000 + x, + CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID", "", "CHARLIE", "DELTA", "ECHO", "FOXTROT", "GOLF", "HOTEL", "INDIA", "JULIET" })[new Random().Next(14)], + Freight = 2.1 * x, + OrderDate = DateTime.Now.AddDays(-x), + }).ToList(); + } + public async void ActionComplete(ActionEventArgs args) + { + if (args.RequestType == Syncfusion.Blazor.Grids.Action.Searching && Grid?.SearchSettings?.Key is string searchVal) { + LastSearchString = searchVal; // Store the last searched value. + } + + } + private async void GetSearchedRecords() + { + if (!string.IsNullOrWhiteSpace(LastSearchString)){ + var clonedOrders = Orders.Select(o => new Order + { + OrderID = o.OrderID, + CustomerID = o.CustomerID, + Freight = o.Freight, + OrderDate = o.OrderDate + }).ToList(); + var filteredOrders = clonedOrders + .Where(o => + (o.OrderID?.ToString().Contains(LastSearchString, StringComparison.OrdinalIgnoreCase) ?? false) || + (!string.IsNullOrEmpty(o.CustomerID) && o.CustomerID.Contains(LastSearchString, StringComparison.OrdinalIgnoreCase)) || + (o.OrderDate?.ToString("d")?.Contains(LastSearchString, StringComparison.OrdinalIgnoreCase) ?? false) || + (o.Freight?.ToString().Contains(LastSearchString, StringComparison.OrdinalIgnoreCase) ?? false) + ).ToList(); + await JSRuntime.InvokeVoidAsync("console.log", filteredOrders); + } + + } + 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/LtVoZfVUgpgICyfa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file From e56ce1e43ea676ae1bd140c76f91014c05fdac99 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Fri, 9 May 2025 09:51:29 +0530 Subject: [PATCH 3/3] 952842: modified the content based on provided corrections. --- blazor/datagrid/filter-menu.md | 4 +- blazor/datagrid/searching.md | 83 +--------------------------------- 2 files changed, 3 insertions(+), 84 deletions(-) diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md index 3d24c21a98..c792585ba1 100644 --- a/blazor/datagrid/filter-menu.md +++ b/blazor/datagrid/filter-menu.md @@ -847,7 +847,7 @@ You can prevent autofill feature by setting the [Autofill](https://help.syncfusi 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 hide the filter icon, use the following CSS targeting the filter icon element: +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: +The following example demonstrates how to filter the **CustomerID** column programmatically and hide the default filter icons: {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/searching.md b/blazor/datagrid/searching.md index 8c3eaf70df..e0ef269905 100644 --- a/blazor/datagrid/searching.md +++ b/blazor/datagrid/searching.md @@ -878,85 +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. - -## Retrieving searched records using a button click - -The Syncfusion Blazor DataGrid allows users to retrieve searched records using an external button. This functionality enables capturing the search text entered in the toolbar and filtering the data manually from the original data source. - -To achieve this, the [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionComplete) event can be used. This event is triggered when a search action is performed, allowing access to the search text. The captured search string can then be used to manually filter the original data source and retrieve the matching records. - -The following example demonstrates how to retrieve searched records using an external button. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} -@using Syncfusion.Blazor.Buttons -@using Syncfusion.Blazor.Grids - - - - - - - - - - - -@code { - private SfGrid Grid; - public List Orders { get; set; } - public List ToolbarItems = new List() { "Search"}; - public List SearchedOrders { get; set; } = new(); - private string LastSearchString = string.Empty; - protected override void OnInitialized() - { - Orders = Enumerable.Range(1, 12).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID", "", "CHARLIE", "DELTA", "ECHO", "FOXTROT", "GOLF", "HOTEL", "INDIA", "JULIET" })[new Random().Next(14)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); - } - public async void ActionComplete(ActionEventArgs args) - { - if (args.RequestType == Syncfusion.Blazor.Grids.Action.Searching && Grid?.SearchSettings?.Key is string searchVal) { - LastSearchString = searchVal; // Store the last searched value. - } - - } - private async void GetSearchedRecords() - { - if (!string.IsNullOrWhiteSpace(LastSearchString)){ - var clonedOrders = Orders.Select(o => new Order - { - OrderID = o.OrderID, - CustomerID = o.CustomerID, - Freight = o.Freight, - OrderDate = o.OrderDate - }).ToList(); - var filteredOrders = clonedOrders - .Where(o => - (o.OrderID?.ToString().Contains(LastSearchString, StringComparison.OrdinalIgnoreCase) ?? false) || - (!string.IsNullOrEmpty(o.CustomerID) && o.CustomerID.Contains(LastSearchString, StringComparison.OrdinalIgnoreCase)) || - (o.OrderDate?.ToString("d")?.Contains(LastSearchString, StringComparison.OrdinalIgnoreCase) ?? false) || - (o.Freight?.ToString().Contains(LastSearchString, StringComparison.OrdinalIgnoreCase) ?? false) - ).ToList(); - await JSRuntime.InvokeVoidAsync("console.log", filteredOrders); - } - - } - 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/LtVoZfVUgpgICyfa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +> You can also clear the searched records by using the clear icon within the search input field. \ No newline at end of file