AccordionControlHtmlTemplates.Group Property

Specifies the default HTML-CSS template used to render a group’s header.

Namespace : DevExpress.XtraBars.Navigation

Assembly : DevExpress.XtraBars.v25.2.dll

NuGet Package : DevExpress.Win.Navigation

Declaration

C#
VB.NET

csharp

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

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

Property Value

Type	Description
HtmlTemplate

The HTML-CSS template used to render a group’s header.

Remarks

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

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: ` <div class="item_layout">

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

html

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

C#
VB.NET

csharp

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

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