Skip to main content
All docs
V25.1
  • AccordionControl.HtmlTemplates Property

    Contains HTML-CSS templates used to render the control’s UI elements.

    Namespace: DevExpress.XtraBars.Navigation

    Assembly: DevExpress.XtraBars.v25.1.dll

    NuGet Package: DevExpress.Win.Navigation

    Declaration

    [DXCategory("Layout")]
    public AccordionControlHtmlTemplates HtmlTemplates { get; }

    Property Value

    Type Description
    AccordionControlHtmlTemplates

    An object that contains HTML-CSS templates used to render the control’s UI elements.

    Remarks

    Use HTML-CSS Templates to Render UI Elements

    AccordionControl allows you to use your knowledge of HTML and CSS markup to render the control’s UI elements. A template’s HTML markup specifies an element’s contents, while the template’s CSS code specifies style, display, and layout settings applied to the element.

    Custom HTML Templates for the Accordion Control

    AccordionControl exposes a set of properties (accessible from the AccordionControl.HtmlTemplates object) to specify HTML-CSS templates to render the control’s elements:

    Display 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