Skip to main content
Tab

CardViewColumn.DataItemTemplate Property

Gets or sets a template for displaying data cells within the current column.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.2.dll

NuGet Package: DevExpress.Web

#Declaration

[DefaultValue(null)]
public virtual ITemplate DataItemTemplate { get; set; }

#Property Value

Type Default Description
ITemplate null

An object that implements the ITemplate interface.

#Remarks

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

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" />
    <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>
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;
}
See Also