By default, search results contained in templates are not highlighted. This example illustrates how to highlight them manually. The main idea is that it is necessary to wrap the found text in a span tag with the “dxcvHL” class. Note: This is a basic example that illustrates how to process simple requests. If you create a composite criterion, it is necessary to perform additional operations to parse the search text.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web;
public partial class _Default : System.Web.UI.Page
{
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;
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASPxCardView - Search Panel - How to highlight the text placed inside a DataItem template</title>
</head>
<body>
<form id="form1" runat="server">
<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>
<dx:CardViewTextColumn FieldName="CategoryName" VisibleIndex="0">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="Description" VisibleIndex="1">
<DataItemTemplate>
<dx:ASPxLabel ID="label1" runat="server" Text='<%# Eval("Description") %>' EncodeHtml="false" OnDataBound="label1_DataBound"></dx:ASPxLabel>
<p>
<dx:ASPxImage ID="ASPxImage2" runat="server" ShowLoadingImage="true"
ImageUrl='<%# string.Format("~/Images/{0}.jpg", Eval("CategoryID")) %>'>
</dx:ASPxImage>
</DataItemTemplate>
</dx:CardViewTextColumn>
</Columns>
</dx:ASPxCardView>
<asp:AccessDataSource ID="ads" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT * FROM [Categories]"></asp:AccessDataSource>
</form>
</body>
</html>
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASPxCardView - Search Panel - How to highlight the text placed inside a DataItem template</title>
</head>
<body>
<form id="form1" runat="server">
<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>
<dx:CardViewTextColumn FieldName="CategoryName" VisibleIndex="0">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="Description" VisibleIndex="1">
<DataItemTemplate>
<dx:ASPxLabel ID="label1" runat="server" Text='<%#Eval("Description")%>' EncodeHtml="false" OnDataBound="label1_DataBound"></dx:ASPxLabel>
<p>
<dx:ASPxImage ID="ASPxImage2" runat="server" ShowLoadingImage="true"
ImageUrl='<%#String.Format("~/Images/{0}.jpg", Eval("CategoryID"))%>'>
</dx:ASPxImage>
</DataItemTemplate>
</dx:CardViewTextColumn>
</Columns>
</dx:ASPxCardView>
<asp:AccessDataSource ID="ads" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT * FROM [Categories]"></asp:AccessDataSource>
</form>
</body>
</html>
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text.RegularExpressions
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports DevExpress.Web
Partial Public Class _Default
Inherits System.Web.UI.Page
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
End Class