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="dx-fieldset options"> <div class="dx-field"> @(Html.DevExtreme() .CheckBox() .Text("Multiple enabled") .OnValueChanged("multipleMode_changed") ) @(Html.DevExtreme() .CheckBox() .Text("Collapsible enabled") .OnValueChanged("collapsibleMode_changed") ) </div> <div class="dx-field"> <div class="dx-field-label">Animation duration</div> <div class="dx-field-value"> @(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 class="dx-field"> <div class="dx-field-label">Selected Items</div> <div class="dx-field-value"> @(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> </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.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System.Web.Mvc; namespace DevExtreme.MVC.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.MVC.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; using System.Web; namespace DevExtreme.MVC.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; } } }
.options { padding-top: 30px; } .options .dx-checkbox { margin-right: 15px; } #accordion h1 { font-size: 20px; font-weight: 200; margin: 0; }