How to: Highlight the Text Placed Inside the DataItem Template During a Search

Dec 17, 2020
2 minutes to read

Search results contained in templates are not highlighted by default, but you can highlight them manually. The following example wraps the search results in a <span> tag with the dxcvHL class. Note that this is a basic example that illustrates how to process simple requests. If you create composite criteria, it is necessary to perform additional operations to parse the search text.

Default.aspx

aspx

<dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="False" DataSourceID="ads" KeyFieldName="CategoryID">
    <SettingsSearchPanel Visible="True" />
    <Columns>
        <dx:CardViewTextColumn FieldName="CategoryID" ReadOnly="True" Visible="False" />
        <dx:CardViewTextColumn FieldName="CategoryName" />
        <dx:CardViewTextColumn FieldName="Description" >
            <DataItemTemplate>
                <dx:ASPxLabel ID="label1" runat="server" Text='<%# Eval("Description") %>' 
                              EncodeHtml="false" OnDataBound="label1_DataBound"/>
                <dx:ASPxImage ID="ASPxImage2" runat="server" ShowLoadingImage="true" 
                              ImageUrl='<%# string.Format("~/Images/{0}.jpg", Eval("CategoryID")) %>' />
            </DataItemTemplate>
        </dx:CardViewTextColumn>
    </Columns>
</dx:ASPxCardView>

csharp

protected void label1_DataBound(object sender, EventArgs e) {
    ASPxLabel label = sender as ASPxLabel;
    label.Text = HighlightSearchText(label.Text, ASPxCardView1.SearchPanelFilter);
}
public static string HighlightSearchText(string source, string searchText) {
    if (string.IsNullOrWhiteSpace(searchText))
        return source;
    var regex = new Regex(Regex.Escape(searchText), RegexOptions.IgnoreCase);
    if (regex.IsMatch(source))
        return string.Format("<span>{0}</span>", regex.Replace(source, "<span class='dxcvHL'>$0</span>"));
    return source;
}

Protected Sub label1_DataBound(ByVal sender As Object, ByVal e As EventArgs)
    Dim label As ASPxLabel = TryCast(sender, ASPxLabel)
    label.Text = HighlightSearchText(label.Text, ASPxCardView1.SearchPanelFilter)
End Sub

Public Shared Function HighlightSearchText(ByVal source As String, ByVal searchText As String) As String
    If String.IsNullOrWhiteSpace(searchText) Then
        Return source
    End If
    Dim regex = New Regex(System.Text.RegularExpressions.Regex.Escape(searchText), RegexOptions.IgnoreCase)
    If regex.IsMatch(source) Then
        Return String.Format("<span>{0}</span>", regex.Replace(source, "<span class='dxcvHL'>$0</span>"))
    End If
    Return source
End Function