diff --git a/knowledge-base/grid-access-gridsearchbox-value.md b/knowledge-base/grid-access-gridsearchbox-value.md new file mode 100644 index 000000000..b2f9d4f07 --- /dev/null +++ b/knowledge-base/grid-access-gridsearchbox-value.md @@ -0,0 +1,121 @@ +--- +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: Capture 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 Grid [state](slug:grid-state). Follow these steps: + +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 + +Get Search Value + + + + + + + + + + + + +

Current Search: @CurrentSearchValue

+ +@code { + private TelerikGrid GridRef { get; set; } + private string CurrentSearchValue { get; set; } = string.Empty; + + private List Employees { get; set; } = new(); + + protected override void OnInitialized() + { + Employees = GenerateData(); + } + + private void GridStateChanged(GridStateEventArgs args) + { + // Capture search value whenever the grid state changes + CurrentSearchValue = ExtractSearchValue(args.GridState); + } + + private void GetSearchValue() + { + // Or retrieve the current search value on demand + var gridState = GridRef.GetState(); + CurrentSearchValue = ExtractSearchValue(gridState); + } + + private string ExtractSearchValue(GridState gridState) + { + 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() + { + 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 State](slug:grid-state)