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

Renders a real-time search box in the TelerikTaskBoard<TItem, TColumn> toolbar that filters cards by their title and description as the user types. Must be placed inside a TaskBoardToolBar block on the TaskBoard. Filtering is applied with a configurable debounce delay to avoid excessive re-renders during fast typing.

Definition

Namespace:Telerik.Blazor.Components

Assembly:Telerik.Blazor.dll

Syntax:

C#
public class TaskBoardToolBarSearchBoxTool : TaskBoardToolBarItem, IComponent, IHandleEvent, IHandleAfterRender, ITaskBoardToolBarItem, IDisposable

Inheritance: objectComponentBaseTaskBoardToolBarItemTaskBoardToolBarSearchBoxTool

Implements: IComponentIDisposableIHandleAfterRenderIHandleEventITaskBoardToolBarItem

Inherited Members ComponentBase.OnInitialized()ComponentBase.OnInitializedAsync()ComponentBase.OnParametersSet()ComponentBase.OnParametersSetAsync()ComponentBase.StateHasChanged()ComponentBase.ShouldRender()ComponentBase.OnAfterRender(bool)ComponentBase.OnAfterRenderAsync(bool)ComponentBase.InvokeAsync(Action)ComponentBase.InvokeAsync(Func<Task>)ComponentBase.DispatchExceptionAsync(Exception)ComponentBase.SetParametersAsync(ParameterView)...

Example:

Example
View Source
<TaskBoardToolBar>
    <TaskBoardToolBarSearchBoxTool DebounceDelay="400" />
</TaskBoardToolBar>

Constructors

C#
public TaskBoardToolBarSearchBoxTool()

Properties

Additional CSS class(es) applied to the search box root element. Use to apply styling that is not available through other built-in parameters.

C#
[Parameter]
public string Class { get; set; }

Milliseconds between when the user stops typing and when card filtering is applied. Increase this value to reduce re-renders on slow connections or large datasets. Default is 300 ms. Mirrors GridToolBarSearchBoxTool.DebounceDelay.

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

Controls the background fill style of the search box input. Accepts Telerik theme constants - e.g. ThemeConstants.SearchBox.FillMode.Solid. When not set, the theme default is used.

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

Text displayed inside the search box when it is empty. Use this to provide a hint about what users can search for. Example: "Search cards...". When not set, a default localized placeholder is shown.

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

Controls the corner radius of the search box. Accepts Telerik theme constants - e.g. ThemeConstants.SearchBox.Rounded.Medium. When not set, the theme default is used.

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

Controls the height and padding of the search box. Accepts Telerik theme constants - e.g. ThemeConstants.SearchBox.Size.Medium. When not set, the theme default is used.

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

Methods

C#
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters:__builderRenderTreeBuilder

Overrides: ComponentBase.BuildRenderTree(RenderTreeBuilder)