Your search did not match any results.
Accordion

Overview

Documentation
The Accordion widget contains several panels displayed one under another. These panels can be collapsed or expanded by a user, which makes this widget very useful for presenting information in a limited amount of space.
<div id="accordion"> @(Html.DevExtreme().Accordion() .ID("accordion-container") .DataSource(d => d.Mvc().Controller("Accordion").LoadAction("Get").Key("ID")) .AnimationDuration(300) .Collapsible(false) .Multiple(false) .SelectedIndex(0) .OnSelectionChanged("accordion_selectionChanged") .ItemTitleTemplate(@<text><h1><%= Name %></h1></text>) .ItemTemplate(@<text> <div class="accodion-item"> <div> <p> <b><%= City %></b> (<span><%= State %></span>) </p> <p> <span><%= ZipCode %></span> <span><%= Address %></span> </p> </div> <div> <p>Phone: <b><%= Phone %></b></p> <p>Fax: <b><%= Fax %></b></p> <p>Website: <a href="<%= Website %>" target="_blank"><%= Website %></a></p> </div> </div> </text>) ) <div class="selected-data"> <span class="caption">Selected Items</span> @(Html.DevExtreme().TagBox() .ID("tagbox") .DisplayExpr("Name") .ValueExpr("Id") .Value(new int[] { 1 }) .DataSource(d => d.Mvc().Controller("Accordion").LoadAction("Get").Key("Id")) .Disabled(true) .OnValueChanged("tagBox_valueChanged") ) </div> <div class="options"> <div class="caption">Options</div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("Multiple enabled") .OnValueChanged("multipleMode_changed") ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("Collapsible enabled") .OnValueChanged("collapsibleMode_changed") ) </div> <div class="option"> <span>Animation duration</span> @(Html.DevExtreme().Slider() .Min(0) .Max(1000) .Value(300) .Label(l => l.Visible(true)) .Tooltip(t => t .Enabled(true) .Position(VerticalEdge.Bottom) ) .OnValueChanged("slider_valueChanged") ) </div> </div> </div> <script> function getAccordionInstance() { return $("#accordion-container").dxAccordion("instance"); } function getTagBoxInstance() { return $("#tagbox").dxTagBox("instance"); } function tagBox_valueChanged(e) { getAccordionInstance().option("selectedItems", e.value); } function accordion_selectionChanged(e) { getTagBoxInstance().option("value", e.component.option("selectedItems")); } function slider_valueChanged(e) { getAccordionInstance().option("animationDuration", e.value); } function multipleMode_changed(e) { var tagBox = getTagBoxInstance(), accordion = getAccordionInstance(); accordion.option("multiple", e.value); tagBox.option("disabled", !e.value); tagBox.option("value", accordion.option("selectedItems")); } function collapsibleMode_changed(e) { getAccordionInstance().option("collapsible", e.value); } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; namespace DevExtreme.NETCore.Demos.Controllers { public class AccordionController : Controller { public ActionResult Overview() { return View(); } [HttpGet] public ActionResult Get(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Companies, loadOptions)), "application/json"); } } }
using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<Company> Companies = new List<Company> { new Company { ID = 1, Name = "Super Mart of the West", Address = "702 SW 8th Street", City = "Bentonville", State = "Arkansas", ZipCode = 72716, Phone = "(800) 555-2797", Fax = "(800) 555-2171", Website = "http://www.nowebsitesupermart.com" }, new Company { ID = 2, Name = "Electronics Depot", Address = "2455 Paces Ferry Road NW", City = "Atlanta", State = "Georgia", ZipCode = 30339, Phone = "(800) 595-3232", Fax = "(800) 595-3231", Website = "http://www.nowebsitedepot.com" }, new Company { ID = 3, Name = "K&S Music", Address = "1000 Nicllet Mall", City = "Minneapolis", State = "Minnesota", ZipCode = 55403, Phone = "(612) 304-6073", Fax = "(612) 304-6074", Website = "http://www.nowebsitemusic.com" }, new Company { ID = 4, Name = "Tom's Club", Address = "999 Lake Drive", City = "Issaquah", State = "Washington", ZipCode = 98027, Phone = "(800) 955-2292", Fax = "(800) 955-2293", Website = "http://www.nowebsitetomsclub.com" } }; } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class Company { public int ID { get; set; } public string Name { get; set; } public string Address { get; set; } public string City { get; set; } public string State { get; set; } public int ZipCode { get; set; } public string Phone { get; set; } public string Fax { get; set; } public string Website { get; set; } } }
#accordion h1 { font-size: 20px; } .options, .selected-data { padding: 20px; background-color: #f5f5f5; margin-top: 20px; } .selected-data { position: relative; height: 36px; } .selected-data > .caption { position: relative; top: 5px; margin-right: 10px; font-weight: bold; font-size: 115%; } .selected-data > .dx-widget { position: absolute; left: 140px; right: 20px; top: 20px; } .options > .caption { font-weight: 500; font-size: 18px; } .option { margin-top: 10px; }