Skip to main content
All docs
V25.1
  • 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).

    Read Tutorial: Search Box Run Demo: TreeList - Search Box

    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();
        }
    }
    

    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();
        }
    }
    

    External Search Box

    Implements

    See Also