AccordionControlHtmlTemplates.FooterElement Property

Specifies the default HTML-CSS template used to render elements when they are displayed within the control’s footer.

Namespace: DevExpress.XtraBars.Navigation

Assembly: DevExpress.XtraBars.v24.2.dll

Declaration

C#

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

VB.NET

<DXCategory("Layout")>
Public ReadOnly Property FooterElement As HtmlTemplate

Property Value

Type	Description
HtmlTemplate	The HTML-CSS template used to render items in the control’s footer.

Remarks

AccordionControl can render its UI elements from HTML-CSS templates. The following properties allow you to define HTML templates for the footer panel and its elements:

• AccordionControlHtmlTemplates.FooterPanel — Specifies the HTML-CSS template used to render the control’s footer.
• FooterElement — Specifies the default HTML-CSS template used to render elements when they are displayed within the control’s footer.
• AccordionControlHtmlTemplates.FooterOverflowButton — Specifies the HTML-CSS template used to render the Overflow button in the control’s footer.

HTML markup for the HtmlFooterElementTemplate template should contain an HTML element with the predefined “dx-item” identifier (id). This element’s size determines the footer item’s display size.

The following example shows a template for the HtmlFooterElementTemplate property. The HTML code uses the “dx-item” id to mark the HTML element that determines the display size of footer items:

HTML#

<div class="container">
    <div id="dx-item" class="dx-item">
        <img class="item_image" src="${Image}">
        <div class="highlight"></div>
    </div>
</div>

CSS

.dx-item-class {
    border-radius: 3px;
    padding: 7px 7px 3px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1px;
}

.item_image {
    width: 32px;
    height: 32px;
}

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:

HTML#

<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.

HTML#

<div class="acc_item">${MyField1}</div>

C#

private void OnQueryHtmlElementData(object sender, QueryAccordionHtmlElementDataEventArgs e) {
    if (e.FieldName == "MyField1") {
        e.Value = "CustomData";
    }
}

VB.NET

Private Sub OnQueryHtmlElementData(ByVal sender As Object, ByVal e As QueryAccordionHtmlElementDataEventArgs)
    If e.FieldName = "MyField1" Then
        e.Value = "CustomData"
    End If
End Sub