Simpal dx-Accordion to display different html divs in AngularJS

Question

I am using DevExtreme for UI in AngularJS CPA app. I want to use an accordion which accepts HTML(for the sake of simplicity) divs instead of the data source. If anybody can provide code snippet or something it would be great(I have been through devExtreme documentation)

Answer 1

I think they do not support the control in a way you want it to behave. I'm pretty sure you have to define the dataSource or items property and tell it what the template is. Having this in mind, why not just provide the content in data source directly like so:

<div id="accordion"></div>

<!-- Your title template -->
<script type="text/html" id="title">
  <h1><%= Title%></h1>
</script>

<!-- Your content template -->    
<script type="text/html" id="myItem">
    <div class="accodion-item">
            <%= Content%>
    </div>
</script>

This way you can have any content you like. Just add the JS code to intitalize your accordion like this.

DevExpress.viz.currentTheme("generic.light");

$(function () {
    DevExpress.ui.setTemplateEngine("underscore");
    var accordion = $("#accordion").dxAccordion({
        dataSource: accordionItems,
        animationDuration: 300,
        collapsible: false,
        multiple: false,
        selectedItems: accordionItems[0],
        keyExpr: "ID",
        itemTitleTemplate: $("#title"),
        itemTemplate: $("#myItem")
    }).dxAccordion("instance");
});

var accordionItems = [
    {
        "ID": 1,
        "Title": "Hey",
        "Content": "<div>There is some content in this div.</div>",
    }, 
    {
        "ID": 2,
        "Title": "Second part",
        "Content": "<div><p>This is a paragraph in a div. Enjoy it!</p></div>",
    }
];

This works fine as can be seen here.