Load accordion with DataSource

19 Dec 20222 minutes to read

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.

CSHTML

<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>

NOTE

View Sample in GitHub.