Search results contained in templates are not highlighted. This example demonstrates how to highlight them manually.
Implementation Details
In this example, DataItemTemplate contains the ASPxLabel control.
ASPx<dx:GridViewDataTextColumn FieldName="CategoryName" >
<DataItemTemplate>
<dx:ASPxImage ID="ASPxImage1" runat="server" ShowLoadingImage="true" Width="50" ImageUrl='<%# string.Format("~/Images/{0}.jpg", Eval("CategoryID")) %>' />
<dx:ASPxLabel ID="label" runat="server" Text='<%# Eval("CategoryName") %>' EncodeHtml="false" OnDataBound="label_DataBound" />
</DataItemTemplate>
</dx:GridViewDataTextColumn>
The ASPxLabel.DataBound
event handler looks for the search text and applies the dxgvHL
CSS class to the found text.
C#protected void label_DataBound(object sender, EventArgs e) {
ASPxLabel label = sender as ASPxLabel;
label.Text = HighlightSearchText(label.Text, gridView.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='dxgvHL'>$0</span>"));
return source;
}
[!NOTE]
This example illustrates how to process simple requests. If you create a composite criterion, it is necessary to perform additional operations to parse the search text.
Files to Review
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Example Code
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.15.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>ASPxGridView - Search Panel - How to highlight the text placed inside a DataItem template</title>
</head>
<body>
<form id="form1" runat="server">
<dx:ASPxGridView ID="gridView" runat="server" AutoGenerateColumns="False" DataSourceID="ads" KeyFieldName="CategoryID" ClientInstanceName="gridView">
<SettingsSearchPanel Visible="true" />
<Columns>
<dx:GridViewDataTextColumn FieldName="CategoryID" />
<dx:GridViewDataTextColumn FieldName="CategoryName" >
<DataItemTemplate>
<dx:ASPxImage ID="ASPxImage1" runat="server" ShowLoadingImage="true" Width="50" ImageUrl='<%# string.Format("~/Images/{0}.jpg", Eval("CategoryID")) %>' />
<dx:ASPxLabel ID="label" runat="server" Text='<%# Eval("CategoryName") %>' EncodeHtml="false" OnDataBound="label_DataBound" />
</DataItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Description" />
</Columns>
</dx:ASPxGridView>
<asp:AccessDataSource ID="ads" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT * FROM [Categories]"></asp:AccessDataSource>
</form>
</body>
</html>
C#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 label_DataBound(object sender, EventArgs e)
{
ASPxLabel label = sender as ASPxLabel;
label.Text = HighlightSearchText(label.Text, gridView.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='dxgvHL'>$0</span>"));
return source;
}
}