Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

AccordionControlHtmlTemplates.Item Property

Specifies the default HTML-CSS template used to render items.

Namespace: DevExpress.XtraBars.Navigation

Assembly: DevExpress.XtraBars.v24.2.dll

NuGet Package: DevExpress.Win.Navigation

#Declaration

[DXCategory("Layout")]
public HtmlTemplate Item { get; }

#Property Value

Type Description
HtmlTemplate

The default HTML-CSS template used to render items.

#Remarks

AccordionControl can render its UI elements from HTML-CSS templates. Use the Item property to specify the default template for AccordionControl items (elements that have the AccordionControlElement.Style property set to Item).

You can also specify different templates for different elements (items and groups). For this purpose, use the HtmlTemplateCollection collection to create templates beforehand. Then, handle the AccordionControl.QueryItemTemplate event to supply templates to elements dynamically.

#Display an Element’s Text, Images, and Custom Data

When you specify templates for AccordionControl elements, you can use the data binding syntax (${PropertyName}) to display text, images, and custom values (AccordionControlElementBase.Tag) of these elements.

${Text} — Inserts an element’s text (AccordionControlElementBase.Text).

${Image} — Inserts an element’s image specified in the AccordionControlElementBase.ImageOptions object. Use the img tag to insert an image, for example, as follows: <img src="${Image}".

For example, the following HTML markup defines a div container that displays an element’s image followed by its text:

<div class="item">
    <div class="item_layout">
        <img class="item_image" src="${Image}">
        <div class="item_text">${Text}</div>
    </div>
</div>

You can also use the ${MyField1} syntax to mark an element as bound to a custom data source. The actual data for this element is set in the QueryHtmlElementData event handler.

<div class="acc_item">${MyField1}</div>
private void OnQueryHtmlElementData(object sender, QueryAccordionHtmlElementDataEventArgs e) {
    if (e.FieldName == "MyField1") {
        e.Value = "CustomData";
    }
}
See Also