From 37864620139b2dd05cc0e047e39e1e511ea0c639 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Thu, 31 Jul 2025 13:35:09 +0000 Subject: [PATCH 1/3] Added new kb article grid-access-gridsearchbox-value --- .../grid-access-gridsearchbox-value.md | 137 ++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 knowledge-base/grid-access-gridsearchbox-value.md diff --git a/knowledge-base/grid-access-gridsearchbox-value.md b/knowledge-base/grid-access-gridsearchbox-value.md new file mode 100644 index 000000000..3c441bc44 --- /dev/null +++ b/knowledge-base/grid-access-gridsearchbox-value.md @@ -0,0 +1,137 @@ +--- +title: How to Access GridSearchBox Value +description: Learn how to retrieve the GridSearchBox value in a GridToolBarTemplate in Telerik UI for Blazor. +type: how-to +page_title: Capturing GridSearchBox Input +meta_title: Capturing GridSearchBox Input +slug: grid-kb-access-gridsearchbox-value +tags: toolbar, searchbox, datasource, filters, grid +res_type: kb +ticketid: 1693363 +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +I need to capture the text entered in the [`GridSearchBox`](slug:grid-searchbox) within the `GridToolBarTemplate`. + +## Solution + +The `GridSearchBox` does not expose a direct `Value` property or provide two-way binding. It is integrated with the Grid's filtering system, automatically converting the search text into filters passed to the Grid. To capture the search text, extract it from the `DataSourceRequest.Filters` during the [`OnRead` event](slug:components/grid/manual-operations) processing. Follow these steps: + +1. Use the `OnRead` event of the Grid to access the current filters. +2. Extract the search text from `DataSourceRequest.Filters`. + +Here is an example: + +````Razor +@using Telerik.DataSource +@using Telerik.DataSource.Extensions + +@( new MarkupString(output) ) + +
+Get Filters + + + + + + + + + + + + +@code { + private List SourceData { get; set; } + private string output { get; set; } + private DataSourceRequest CurrentRequest { get; set; } + + private void GetFilters() + { + output = string.Empty; + + foreach (var item in CurrentRequest.Filters) + { + if (item is FilterDescriptor) // filter row + { + FilterDescriptor currFilter = item as FilterDescriptor; + output += $"field: {currFilter.Member}, operator {currFilter.Operator}, value: {currFilter.Value}
"; + } + + if (item is CompositeFilterDescriptor) // filter menu + { + CompositeFilterDescriptor currFilter = item as CompositeFilterDescriptor; + output += $"START nested filter: logical operator: {currFilter.LogicalOperator}, details:
"; + + foreach (FilterDescriptor nestedFilter in currFilter.FilterDescriptors) + { + + output += $"field: {nestedFilter.Member}, operator {nestedFilter.Operator}, value: {nestedFilter.Value}
"; + } + output += "END nested filter
"; + } + } + } + + protected async Task ReadItems(GridReadEventArgs args) + { + CurrentRequest = args.Request; //store the current request for later use + + await Task.Delay(1000); //simulate network delay from a real async call + + var datasourceResult = SourceData.ToDataSourceResult(args.Request); + + args.Data = datasourceResult.Data; + args.Total = datasourceResult.Total; + } + + protected override void OnInitialized() + { + SourceData = GenerateData(); + } + + private List GenerateData() + { + var result = new List(); + var rand = new Random(); + for (int i = 0; i < 100; i++) + { + result.Add(new Employee() + { + ID = i, + Name = "Name " + i, + HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20)) + }); + } + + return result; + } + + public class Employee + { + public int ID { get; set; } + public string Name { get; set; } + public DateTime HireDate { get; set; } + } +} +```` + +## See Also + +* [Grid SearchBox](slug:grid-searchbox) +* [Grid OnRead](slug:components/grid/manual-operations) From 4cb1c1b143d9a6de367189f05f8848f45bb5e697 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Tue, 7 Oct 2025 17:09:57 +0300 Subject: [PATCH 2/3] chore(Grid): apply last fixes --- .../grid-access-gridsearchbox-value.md | 80 ++++++++----------- 1 file changed, 32 insertions(+), 48 deletions(-) diff --git a/knowledge-base/grid-access-gridsearchbox-value.md b/knowledge-base/grid-access-gridsearchbox-value.md index 3c441bc44..d1153ac86 100644 --- a/knowledge-base/grid-access-gridsearchbox-value.md +++ b/knowledge-base/grid-access-gridsearchbox-value.md @@ -27,25 +27,24 @@ I need to capture the text entered in the [`GridSearchBox`](slug:grid-searchbox) ## Solution -The `GridSearchBox` does not expose a direct `Value` property or provide two-way binding. It is integrated with the Grid's filtering system, automatically converting the search text into filters passed to the Grid. To capture the search text, extract it from the `DataSourceRequest.Filters` during the [`OnRead` event](slug:components/grid/manual-operations) processing. Follow these steps: +The `GridSearchBox` does not expose a direct `Value` property or provide two-way binding. It is integrated with the Grid's filtering system, automatically converting the search text into filters passed to the Grid. To capture the search text, extract it from the Grid [state](slug:grid-state). Follow these steps: -1. Use the `OnRead` event of the Grid to access the current filters. -2. Extract the search text from `DataSourceRequest.Filters`. +1. Use the [`OnStateChanged` event](slug:grid-state#onstatechanged) of the Grid to access the current filters. +2. Extract the search text from the component state. Here is an example: ````Razor @using Telerik.DataSource -@using Telerik.DataSource.Extensions -@( new MarkupString(output) ) +Get Search Value -
-Get Filters - - + Sortable="true" + Pageable="true" + OnStateChanged="@((GridStateEventArgs args) => GridStateChanged(args))"> @@ -56,59 +55,44 @@ Here is an example: -@code { - private List SourceData { get; set; } - private string output { get; set; } - private DataSourceRequest CurrentRequest { get; set; } +

Current Search: @CurrentSearchValue

- private void GetFilters() - { - output = string.Empty; +@code { + private TelerikGrid GridRef { get; set; } + private string CurrentSearchValue { get; set; } = string.Empty; - foreach (var item in CurrentRequest.Filters) - { - if (item is FilterDescriptor) // filter row - { - FilterDescriptor currFilter = item as FilterDescriptor; - output += $"field: {currFilter.Member}, operator {currFilter.Operator}, value: {currFilter.Value}
"; - } + private List Employees { get; set; } = new(); - if (item is CompositeFilterDescriptor) // filter menu - { - CompositeFilterDescriptor currFilter = item as CompositeFilterDescriptor; - output += $"START nested filter: logical operator: {currFilter.LogicalOperator}, details:
"; - - foreach (FilterDescriptor nestedFilter in currFilter.FilterDescriptors) - { - - output += $"field: {nestedFilter.Member}, operator {nestedFilter.Operator}, value: {nestedFilter.Value}
"; - } - output += "END nested filter
"; - } - } + protected override void OnInitialized() + { + Employees = GenerateData(); } - protected async Task ReadItems(GridReadEventArgs args) + private void GridStateChanged(GridStateEventArgs args) { - CurrentRequest = args.Request; //store the current request for later use - - await Task.Delay(1000); //simulate network delay from a real async call - - var datasourceResult = SourceData.ToDataSourceResult(args.Request); + // Capture search value whenever the grid state changes + CurrentSearchValue = ExtractSearchValue(args.GridState); + } - args.Data = datasourceResult.Data; - args.Total = datasourceResult.Total; + private void GetSearchValue() + { + // Or retrieve the current search value on demand + var gridState = GridRef.GetState(); + CurrentSearchValue = ExtractSearchValue(gridState); } - protected override void OnInitialized() + private string ExtractSearchValue(GridState gridState) { - SourceData = GenerateData(); + return (gridState.SearchFilter as CompositeFilterDescriptor)? + .FilterDescriptors.OfType() + .FirstOrDefault()?.Value?.ToString() ?? string.Empty; } private List GenerateData() { var result = new List(); var rand = new Random(); + for (int i = 0; i < 100; i++) { result.Add(new Employee() @@ -134,4 +118,4 @@ Here is an example: ## See Also * [Grid SearchBox](slug:grid-searchbox) -* [Grid OnRead](slug:components/grid/manual-operations) +* [Grid State](slug:grid-state) From d41e2d2f401b4aadafeb37ff3510f294cb0cf46b Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Tue, 7 Oct 2025 17:13:20 +0300 Subject: [PATCH 3/3] chore(Grid): apply meta title change --- knowledge-base/grid-access-gridsearchbox-value.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-access-gridsearchbox-value.md b/knowledge-base/grid-access-gridsearchbox-value.md index d1153ac86..b2f9d4f07 100644 --- a/knowledge-base/grid-access-gridsearchbox-value.md +++ b/knowledge-base/grid-access-gridsearchbox-value.md @@ -3,7 +3,7 @@ title: How to Access GridSearchBox Value description: Learn how to retrieve the GridSearchBox value in a GridToolBarTemplate in Telerik UI for Blazor. type: how-to page_title: Capturing GridSearchBox Input -meta_title: Capturing GridSearchBox Input +meta_title: Capture GridSearchBox Input slug: grid-kb-access-gridsearchbox-value tags: toolbar, searchbox, datasource, filters, grid res_type: kb