TreeListSearchBoxTemplateContext.SearchText Property
Specifies the search text.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v25.1.dll
NuGet Package: DevExpress.Blazor
Declaration
public string SearchText { get; set; }
Property Value
Type | Description |
---|---|
String | A search text. |
Remarks
Set the ShowSearchBox property to true
to display a search box in the TreeList component. When users type within the search box, the TreeList filters data rows, displays those that match the search string, and highlights search results.
The SearchBoxTemplate property allows you to use a custom editor as a search box. The template accepts a TreeListSearchBoxTemplateContext object as the context
parameter. Use the parameter’s SearchText
property to specify the search query.
The following code snippet uses the DxDateEdit<T> component to search for dates in the TreeList:
@inject EmployeeTaskService EmployeeTaskService
<DxTreeList Data="TreeListData"
KeyFieldName="Id"
ParentKeyFieldName="ParentId"
ShowSearchBox="true">
<Columns>
<DxTreeListDataColumn FieldName="Name" Caption="Task" SearchEnabled="false" />
<DxTreeListDataColumn FieldName="EmployeeName" SearchEnabled="false" />
<DxTreeListDataColumn FieldName="StartDate" />
<DxTreeListDataColumn FieldName="DueDate" />
</Columns>
<SearchBoxTemplate>
<DxDateEdit NullText="Search for a date..."
Date="GetDateEditValue(context.SearchText)"
DateChanged="(DateOnly? v) => context.SearchText = v.ToString()"
ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
</SearchBoxTemplate>
</DxTreeList>
@code {
List<EmployeeTask> TreeListData { get; set; }
protected override void OnInitialized() {
TreeListData = EmployeeTaskService.GenerateData();
}
DateOnly? GetDateEditValue(string searchText) {
if (string.IsNullOrEmpty(searchText))
return null;
return DateOnly.FromDateTime(Convert.ToDateTime(searchText));
}
}