Skip to main content

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

  • 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.

<dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="False" DataSourceID="ads" KeyFieldName="CategoryID">
    <SettingsSearchPanel Visible="True" />
        <dx:CardViewTextColumn FieldName="CategoryID" ReadOnly="True" Visible="False" />
        <dx:CardViewTextColumn FieldName="CategoryName" />
        <dx:CardViewTextColumn FieldName="Description" >
                <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")) %>' />
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;