Accordion
- 2 minutes to read
Accordion is a UI control that contains multiple panels displayed one under another.
Getting Started
The Accordion UI Control is based on the DevExtreme Accordion component.
To add this control to your project, follow the instructions in the following help topics:
- Configure a Visual Studio Project or Configure a non Visual Studio Project
- Add Controls to a Project
- Razor Syntax
Basic Syntax
@(Html.DevExtreme().Accordion()
.DataSource(new[] {
new {
ID = 1,
CompanyName = "Super Mart of the West",
Address = "702 SW 8th Street"
},
new {
ID = 2,
CompanyName = "Electronics Depot",
Address = "2455 Paces Ferry Road NW"
},
new {
ID = 3,
CompanyName = "K&S Music",
Address = "1000 Nicllet Mall"
}
})
.ItemTitleTemplate(@<text><b><%- CompanyName %></b></text>)
.ItemTemplate(@<text><i><%- Address %></i></text>)
)
Built-in Capabilities and Configuration Guides
API
Server-Side API
- Initialization
- Call the Accordion() method to create an Accordion control. This action initializes an AccordionBuilder instance. Use the instance methods to specify Accordion options and event handlers.
- Options
- For a complete option list, see Options. For details on how to specify control options, refer to the following help topic: Specify Options.
- Events
- For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.
Client-Side API
- Options
- If you need to specify the DataGrid options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme Accordion options.
- Methods
- For a list of available methods, see DevExtreme Accordion methods. For details on how to call methods, refer to the following help topic: Call Methods.
Accessibility
For more information on Accordion accessibility compliance, refer to the following help topic: Accessibility.