You can bind any data object to Accordion items, by mapping it to header and content property.
In the below demo, Data is fetched from an OData
service using DataManager
. The result data is formatted as a JSON object with header
and content
fields, which is set to items property of Accordion.
<div id='element'></div>
<script>
var itemsData = [];
var mapping = { header: 'FirstName', content: 'Notes' };
const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees';
new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
.executeQuery(new ej.data.Query().range(4, 7)).then(function (e) {
var result = e.result;
for (var i = 0; i < result.length; i++) {
itemsData.push({ header: result[i][mapping.header], content: result[i][mapping.content] });
}
//Initialize Accordion component
var accordion = new ej.navigations.Accordion({
items: itemsData
});
//Render initialized Accordion component
accordion.appendTo('#element');
});
</script>
<style>
.accordion-control-section {
margin: 0 10% 0 10%;
}
@@media screen and (max-width: 768px) {
.accordion-control-section {
margin: 0;
}
}
</style>
public ActionResult Index()
{
return View();
}