New to Telerik UI for Blazor? Start a free 30-day trial

TableSearchBox

Class

A component that lets you add a debounced search box to a Grid toolbar. Applies search across specified Fields (or all string fields by default), supports size, rounded, and fill mode styling, width control, and ESC to clear. Emits search/clear commands to the toolbar container.

Definition

Namespace:Telerik.Blazor.Components.Common.Grid.SearchBox

Assembly:Telerik.Blazor.dll

Syntax:

public class TableSearchBox : BaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Inheritance: objectComponentBaseBaseComponentTableSearchBox

Derived Classes: GridSearchBoxTreeListSearchBox

Implements: IComponentIDisposableIHandleAfterRenderIHandleEvent

Constructors

TableSearchBox()

public TableSearchBox()

Methods

Dispose()

public override void Dispose()

Overrides: BaseComponent.Dispose()

OnAfterRenderAsync(bool)

Task

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters:firstRenderboolReturns:

Task

Overrides: BaseComponent.OnAfterRenderAsync(bool)

Properties

DebounceDelay

int

Delay in milliseconds between when user stops typing and when search filtering is applied. Use this to prevent excessive filtering during typing. Default value is 300ms.

[Parameter]
public int DebounceDelay { get; set; }

Fields

IList<string>

List of column field names to include in search operations. When empty, all string-type fields are automatically included in search.

[Parameter]
public IList<string> Fields { get; set; }

FillMode

string

Controls the background styling of the search box. Use Solid for filled background, Outline for border-only, or Flat for minimal styling.

[Parameter]
public string FillMode { get; set; }

Placeholder

string

Text displayed inside the search box when it's empty. Use this to provide hints about search functionality to users. Default value is "Search" (localized).

[Parameter]
public string Placeholder { get; set; }

Rounded

string

Sets the corner radius of the search box. Use Small, Medium, Large, or Full for different border radius values.

[Parameter]
public string Rounded { get; set; }

Size

string

Controls the height and padding of the search box. Use Small, Medium, or Large for different sizes.

[Parameter]
public string Size { get; set; }

Width

string

CSS width value for the search box. Use pixels, percentages, or other CSS units to control the search box width.

[Parameter]
public string Width { get; set; }