DxTreeList.SearchText Property
Specifies the text that the TreeList uses to filter and highlight data.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v25.1.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(null)]
[Parameter]
public string SearchText { get; set; }
Property Value
Type | Default | Description |
---|---|---|
String | null | The search text. |
Remarks
The TreeList component can search for a string in all visible data cells, filter, and highlight search results. The SearchText
property allows you to specify the search query in code. You can use special characters to create complex search criteria.
Use the SearchTextParseMode property to specify how the TreeList searches for a match if the query contains multiple words (an exact matching phrase, all words in any order, or any word). The FilterTreeMode property specifies whether the TreeList component displays children/parents for rows that meet search criteria.
You can handle the SearchTextChanged event to respond to search text changes. The event is handled automatically when you use two-way data binding for the SearchText
property (@bind-SearchText
).
Set Initial Search String
Set the ShowSearchBox property to true
to display the built-in search box in the TreeList component. Use the SearchText
property to set an initial search string or get the current search box value:
@inject EmployeeTaskService EmployeeTaskService
<DxTreeList Data="TreeListData"
KeyFieldName="Id"
ParentKeyFieldName="ParentId"
ShowSearchBox="true"
SearchText="sales">
<Columns>
<DxTreeListDataColumn FieldName="Name" Caption="Task" />
<DxTreeListDataColumn FieldName="EmployeeName" />
<DxTreeListDataColumn FieldName="StartDate" />
<DxTreeListDataColumn FieldName="DueDate" />
</Columns>
</DxTreeList>
@code {
List<EmployeeTask> TreeListData { get; set; }
protected override void OnInitialized() {
TreeListData = EmployeeTaskService.GenerateData();
}
}
Implement External Search Box
You can use the SearchText
property to implement an external search editor for the TreeList component:
@inject EmployeeTaskService EmployeeTaskService
<div>
<DxSearchBox @bind-Text="@TreeListSearchText" aria-label="Search" />
</div>
<DxTreeList Data="TreeListData"
KeyFieldName="Id"
ParentKeyFieldName="ParentId"
SearchText="@TreeListSearchText">
<Columns>
<DxTreeListDataColumn FieldName="Name" Caption="Task" />
<DxTreeListDataColumn FieldName="EmployeeName" />
<DxTreeListDataColumn FieldName="StartDate" />
<DxTreeListDataColumn FieldName="DueDate" />
</Columns>
</DxTreeList>
@code {
List<EmployeeTask> TreeListData { get; set; }
string TreeListSearchText { get; set; }
protected override void OnInitialized() {
TreeListData = EmployeeTaskService.GenerateData();
}
}