GridDataColumnCellDisplayTemplateContext.GetHighlightedText(String) Method

Returns the specified text with the highlighted search text (if any).

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.Grid.v26.1.dll

Declaration

public RenderFragment GetHighlightedText(
    string text
)

Parameters

Name	Type	Description
text	String	The text where search matches are highlighted.

Returns

Type	Description
RenderFragment	A delegate that returns the highlighted text.

Remarks

The GetHighlightedText method is in effect if you use the search box within the Grid component.

The following code snippet highlights search text matches in CategoryName and Description fields:

<DxGrid Data="@products"
        ShowSearchBox="true"
        @ref="grid">
    <Columns>
        <DxGridCommandColumn Width="100px" />
        <DxGridDataColumn FieldName="@nameof(Product.ProductID)" Width="90px" ReadOnly="true" />
        <DxGridDataColumn FieldName="@nameof(Product.ProductName)" MinWidth="200" Width="50%" />
        <DxGridDataColumn FieldName="@nameof(Product.CategoryID)" Caption="Category" MinWidth="150">
            <EditSettings>
                <DxComboBoxSettings Data="@categories"
                                    ValueFieldName="@nameof(Category.CategoryID)"
                                    TextFieldName="@nameof(Category.CategoryName)" />
            </EditSettings>
            <CellDisplayTemplate Context="cellContext">
                @{
                    var items = (Product)cellContext.DataItem;
                    var category = (Category)categories.FirstOrDefault(c => c.CategoryID == items.CategoryID);
                }
                <div>
                    <div><b>@cellContext.GetHighlightedText(category.CategoryName)</b></div>
                    <para>@cellContext.GetHighlightedText(category.Description)</para>
                </div>
            </CellDisplayTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="@nameof(Product.UnitPrice)" />
        <DxGridDataColumn FieldName="@nameof(Product.UnitsInStock)" />
        <DxGridDataColumn FieldName="@nameof(Product.RestockDate)" />
        <DxGridDataColumn FieldName="@nameof(Product.Discontinued)" MinWidth="130" />
    </Columns>
</DxGrid>

@code {
    DxGrid grid;
    private List<Product> products = new();
    private List<Category> categories = new();

    protected override void OnInitialized() {
        products = DataService.GetProducts().ToList();
        categories = DataService.GetCategories().ToList();
    }
}

For additional information about search in the Grid component, refer to the following topic: Search Box in Blazor Grid.