Home Simpal dx-Accordion to display different html divs in AngularJS
Reply: 1

Simpal dx-Accordion to display different html divs in AngularJS

Kishan vaishnav
1#
Kishan vaishnav Published in 2018-02-14 04:20:04Z

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)

Rob
2#
Rob Reply to 2018-02-14 10:36:37Z

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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.31163 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO