TreeListDataColumnCellDisplayTemplateContext.HighlightedDisplayText Property

Returns the cell’s display text that the search engine can highlight.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public RenderFragment HighlightedDisplayText { get; }

Property Value

Type	Description
RenderFragment	Highlighted display 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 search engine does not highlight cell content defined with DataColumnCellDisplayTemplate and CellDisplayTemplate properties. Use the template’s HighlightedDisplayText option to add text that can be highlighted:

<DxTreeList Data="@Data"
            KeyFieldName="Id"
            ParentKeyFieldName="ParentId"
            ShowSearchBox="true">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" Caption="Assigned To" />
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
        <DxTreeListDataColumn FieldName="Priority">
            <EditSettings>
                <DxComboBoxSettings Data="Priorities" ValueFieldName="Value" TextFieldName="Text" />
            </EditSettings>
            <CellDisplayTemplate>
                @{
                  var employeeTask = (EmployeeTask)context.DataItem;
                  var displayText = TreeListRenderHelper.EmployeeTaskPriorityToString(employeeTask) + " priority";
                  var badgeClass = employeeTask.Priority switch {
                      -1 => "bg-success",
                      0 => "bg-info",
                      1 => "bg-warning",
                      _ => throw new ArgumentException()
                  };
                }
                <span class="badge @badgeClass" title="@displayText">@context.HighlightedDisplayText</span>
            </CellDisplayTemplate>
        </DxTreeListDataColumn>
    </Columns>
</DxTreeList>

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