diff --git a/_contentTemplates/grid/state.md b/_contentTemplates/grid/state.md
index 6ea889c21c..34b4d7177d 100644
--- a/_contentTemplates/grid/state.md
+++ b/_contentTemplates/grid/state.md
@@ -396,14 +396,16 @@
Data="@GridData"
Pageable="true"
Sortable="true">
-
-
- Search Programmatically
- Clear Search
-
+
+
+ Search Programmatically
+ Clear Search
+
+
+
@@ -417,49 +419,53 @@
private async Task OnSearchButtonClick()
{
- if (GridRef != null)
+ if (GridRef is null)
{
- var gridState = GridRef.GetState();
+ return;
+ }
- var searchString = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)}";
+ GridState gridState = GridRef.GetState();
- var cfd = new CompositeFilterDescriptor();
+ string searchString = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)}";
- cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;
- cfd.FilterDescriptors = new FilterDescriptorCollection();
+ CompositeFilterDescriptor cfd = new();
- // Add one FilterDesccriptor for each string column
- cfd.FilterDescriptors.Add(new FilterDescriptor()
- {
- Member = nameof(GridModel.Name),
- MemberType = typeof(string),
- Operator = FilterOperator.Contains,
- Value = searchString
- });
- cfd.FilterDescriptors.Add(new FilterDescriptor()
- {
- Member = nameof(GridModel.Description),
- MemberType = typeof(string),
- Operator = FilterOperator.Contains,
- Value = searchString
- });
+ cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;
+ cfd.FilterDescriptors = new FilterDescriptorCollection();
- gridState.SearchFilter = cfd;
+ // Add one FilterDesccriptor for each string column
+ cfd.FilterDescriptors.Add(new FilterDescriptor()
+ {
+ Member = nameof(GridModel.Name),
+ MemberType = typeof(string),
+ Operator = FilterOperator.Contains,
+ Value = searchString
+ });
+ cfd.FilterDescriptors.Add(new FilterDescriptor()
+ {
+ Member = nameof(GridModel.Description),
+ MemberType = typeof(string),
+ Operator = FilterOperator.Contains,
+ Value = searchString
+ });
- await GridRef.SetStateAsync(gridState);
- }
+ gridState.SearchFilter = cfd;
+
+ await GridRef.SetStateAsync(gridState);
}
private async Task OnClearButtonClick()
{
- if (GridRef != null)
+ if (GridRef is null)
{
- var gridState = GridRef.GetState();
+ return;
+ }
- (gridState.SearchFilter as CompositeFilterDescriptor)?.FilterDescriptors.Clear();
+ GridState gridState = GridRef.GetState();
- await GridRef.SetStateAsync(gridState);
- }
+ (gridState.SearchFilter as CompositeFilterDescriptor)?.FilterDescriptors.Clear();
+
+ await GridRef.SetStateAsync(gridState);
}
protected override void OnInitialized()
diff --git a/components/grid/filter/searchbox.md b/components/grid/filter/searchbox.md
index fae6a67ea8..965afd34c2 100644
--- a/components/grid/filter/searchbox.md
+++ b/components/grid/filter/searchbox.md
@@ -12,44 +12,68 @@ position: 20
In addition to [Grid filtering](slug:components/grid/filtering), you can enhance functionality by adding a SearchBox to the [Grid Toolbar](slug:components/grid/features/toolbar). This search box filters multiple Grid columns simultaneously.
-Users type their query, and the Grid performs a case-insensitive Contains search on all visible string columns, adjusting the filters accordingly. To customize the filter delay and selected fields, see the [Customize the SearchBox section](#customize-the-searchbox).
+Users type their query, and the Grid performs a case-insensitive Contains search on all visible string columns. To customize the filter delay and searchable columns, see the [Customize the SearchBox section](#customize-the-searchbox).
-The SearchBox operates independently of Grid filtering, respecting existing filters and adding extra criteria to refine search results. To enable the SearchBox, include the `` tag in the [``](slug:components/grid/features/toolbar).
+The SearchBox operates independently of Grid filtering, respecting existing filters and adding extra criteria to refine search results.
-To enable the SearchBox, add the `` tag in the [``](slug:components/grid/features/toolbar).
+## Basic Usage
+
+To enable the built-in Grid SearchBox, use one of the following options:
+
+* Add a `` tag to the [Grid ToolBar](slug:components/grid/features/toolbar). This approach is suitable if you are not using a Grid ToolBar yet, or if you are using only built-in ToolBar tools.
+ ````RAZOR.skip-repl
+
+
+
+
+
+ ````
+
+* Add a `` tag to the [Grid ToolBar Template](slug:components/grid/features/toolbar#custom-toolbar-configuration). This approach is suitable if you have or need custom Grid ToolBar content.
+ ````RAZOR.skip-repl
+
+
+
+
+
+ ````
+
+The following example shows the first option in action, while the [customization demo](#customize-the-searchbox) below uses a `GridToolBarTemplate`.
>caption Grid SearchBox
````RAZOR
-
-
-
+ Height="90vh"
+ Pageable="true">
+
+
+
-
-
+
+
+
@code {
- private List GridData { get; set; } = new();
+ private List GridData { get; set; } = new();
protected override void OnInitialized()
{
- for (int i = 1; i <= 50; i++)
+ Random rnd = Random.Shared;
+ for (int i = 1; i <= 1000; i++)
{
- GridData.Add(new SampleModel()
+ GridData.Add(new GridModel()
{
Id = i,
- Name = $"{(char)(64 + i % 26 + 1)}{(char)(64 + i % 26 + 1)} {i}",
- Description = $"{(char)(123 - i % 26 - 1)}{(char)(123 - i % 26 - 1)} {i}"
+ Name = $"{(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)} {rnd.Next(10, 100)}",
+ Description = $"{(char)rnd.Next(97, 123)}{(char)rnd.Next(97, 123)} {rnd.Next(10, 100)}"
});
}
}
- public class SampleModel
+ public class GridModel
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
@@ -58,7 +82,6 @@ To enable the SearchBox, add the `` tag in the [``). |
-| `DebounceDelay` | `int`
(`300`) | The time in milliseconds between the user typing ends and the search starts. This provides a performance optimization when using the [`OnRead` event](slug:common-features-data-binding-onread). Filtering does not occur on every keystroke during fast typing, unless `DebounceDelay` is set to `0`. |
-| `Fields` | `List` | The collection of model properties to search in. By default, the Grid searches in all visible columns that are bound to `string` fields. You can only define a subset of those fields. It is also possible to programmatically [search in `string` fields, which are not displayed in the Grid](slug:grid-kb-search-in-hidden-fields). |
-| `Placeholder` | `string`
(`"Search..."`) | The textbox placeholder that hints the user what the SearchBox does. The built-in default value is [localized](slug:globalization-localization). |
-| `Width` | `string` | Specifies the width of the SearchBox component. |
+The Grid searches in all visible string columns or a subset of theirs. It is also possible to programmatically [search in `string` fields, which are not displayed in the Grid](slug:grid-kb-search-in-hidden-fields).
-The example below demonstrates all SearchBox settings in action, and also how to move the SearchBox on the opposite side of the Grid toolbar.
+The example below demonstrates all SearchBox settings in action, and also how to move the SearchBox on the opposite side of the Grid ToolBar when using `GridToolBarTemplate`.
>caption Grid SearchBox customizaton
````RAZOR
+ PageSize="20"
+ Sortable="true"
+ Height="90vh">
-
-
+
+
@@ -114,24 +136,25 @@ The example below demonstrates all SearchBox settings in action, and also how to
@code {
- private List GridData { get; set; } = new();
+ private List GridData { get; set; } = new();
- private List SearchableFields = new List { nameof(SampleModel.Name) };
+ private List SearchableFields = new List { nameof(GridModel.Name) };
protected override void OnInitialized()
{
- for (int i = 1; i <= 50; i++)
+ Random rnd = Random.Shared;
+ for (int i = 1; i <= 1000; i++)
{
- GridData.Add(new SampleModel()
+ GridData.Add(new GridModel()
{
Id = i,
- Name = $"{(char)(64 + i % 26 + 1)}{(char)(64 + i % 26 + 1)} {i}",
- Description = $"{(char)(123 - i % 26 - 1)}{(char)(123 - i % 26 - 1)} {i}"
+ Name = $"{(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)} {rnd.Next(10, 100)}",
+ Description = $"{(char)rnd.Next(97, 123)}{(char)rnd.Next(97, 123)} {rnd.Next(10, 100)}"
});
}
}
- public class SampleModel
+ public class GridModel
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
diff --git a/components/grid/toolbar.md b/components/grid/toolbar.md
index 74c938b3d0..2647d469d6 100644
--- a/components/grid/toolbar.md
+++ b/components/grid/toolbar.md
@@ -42,7 +42,7 @@ The **Edit** command button is disabled if there is no [selected Grid row](slug:
| Tool Name | Tool Tag | Description |
| --- | --- | --- |
-| Spacer | `GridToolBarSpacerTool` | Consumes the available empty space and pushes the rest of the tools next to one another. |
+| Spacer | `GridToolBarSpacerTool` | Consumes the available empty space and pushes the rest of the tools next to one another. When using a [`GridToolBarTemplate`](#custom-toolbar-configuration), you can mimic this tool with ``. |
## Custom Tools