CardViewColumn.DataItemTemplate Property
Gets or sets a template for displaying data cells within the current column.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v18.2.dll
Declaration
[DefaultValue(null)]
public virtual ITemplate DataItemTemplate { get; set; }
<DefaultValue(Nothing)>
Public Overridable Property DataItemTemplate As ITemplate
Property Value
| Type |
Default |
Description |
| ITemplate |
*null* |
An object that implements the ITemplate interface.
|
To provide a common template for displaying data cells within the ASPxCardView, use the CardViewTemplates.DataItem property.
Note
Once a template defined via the DataItemTemplate property is created within a control, it is instantiated within a container object of the CardViewDataItemTemplateContainer type. This container object exposes a set of specific properties to which the template’s child controls can be bound.
Example
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
See Also