JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Integrate Essential JS 2 TreeView inside the Accordion in JavaScript Accordion control

08 May 2023 / 2 minutes to read

Accordion supports to render other Essential JS 2 Components by using content property. You can give content as an element string like below, for initializing the component.

Copied to clipboard
content: '<div id="element"> </div>'

The other component can be rendered with the use of provided events, such as clicked and expanding. The following procedure is to render a TreeView within the Accordion,

  • Import the TreeView module from ej2-navigations, for adding TreeView. Please refer the TreeView initialization steps
  • You can initialize the TreeView component in expanding event, by getting the element and defining the required TreeView properties.
Source
Preview
index.ts
index.html
datasource.ts
Copied to clipboard
import { Accordion, TreeView } from '@syncfusion/ej2-navigations';
import { DocDB, DownloadDB, PicDB} from 'datasource.ts'

  //Initialize Accordion component
let acrdnObj: Accordion = new Accordion({
expanding: expand,
width: 400,
   items : [
       { header: 'Documents', expanded: true, content: '<div id="treeDoc"></div>' },
       { header: 'Downloads', content : '<div id="treeDownload"></div>' },
       { header: 'Pictures', content: '<div id="treePic"></div>' },
   ]
});
//Render initialized Accordion component
acrdnObj.appendTo('#element');

//Expanding Event function for Accordion component.
function expand(e: ExpandEventArgs): void {
  if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 0 && e.element.querySelector('#treeDoc').childElementCount === 0) {
//Initialize TreeView component
    let treeObj: TreeView = new TreeView({
    fields: { dataSource: DocDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
    sortOrder: 'Ascending'
});
//Render initialized TreeView component
treeObj.appendTo('#treeDoc');
  }
if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 1 && e.element.querySelector('#treeDownload').childElementCount === 0) {
    let treeObj: TreeView = new TreeView({
    fields: { dataSource: DownloadDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
    sortOrder: 'Ascending'
});
treeObj.appendTo('#treeDownload');
  }
  if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 2 && e.element.querySelector('#treePic').childElementCount === 0) {
    let treeObj: TreeView = new TreeView({
    fields: { dataSource: PicDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
    sortOrder: 'Ascending'
});
treeObj.appendTo('#treePic');
  }
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id='element'></div>
        <br/><br/>
        <div id='result'></div>
    </div>
</body>

</html>
Copied to clipboard
export let DocDB: { [key: string]: Object }[] = [
    {
            nodeId: '03', nodeText: 'Documents', icon: 'folder',
            nodeChild: [
                { nodeId: '03-01', nodeText: 'Environment Pollution.docx', icon: 'docx' },
                { nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx', icon: 'docx' },
                { nodeId: '03-03', nodeText: 'Global Warming.ppt', icon: 'ppt' },
                { nodeId: '03-04', nodeText: 'Social Network.pdf', icon: 'pdf' },
                { nodeId: '03-05', nodeText: 'Youth Empowerment.pdf', icon: 'pdf' },
            ]
        },
    ]
    
  export let DownloadDB: { [key: string]: Object }[] = [
        {
            nodeId: '05', nodeText: 'Downloads', icon: 'folder',
            nodeChild: [
                { nodeId: '05-01', nodeText: 'UI-Guide.pdf', icon: 'pdf' },
                { nodeId: '05-02', nodeText: 'Tutorials.zip', icon: 'zip' },
                { nodeId: '05-03', nodeText: 'Game.exe', icon: 'exe' },
                { nodeId: '05-04', nodeText: 'TypeScript.7z', icon: 'zip' },
            ]
        }
    ]
    
  export let PicDB: { [key: string]: Object }[] = [
        {
            nodeId: '04', nodeText: 'Pictures', icon: 'folder', expanded: true,
            nodeChild: [
                {
                    nodeId: '04-01', nodeText: 'Camera Roll', icon: 'folder', expanded: true,
                    nodeChild: [
                        { nodeId: '04-01-01', nodeText: 'WIN_20160726_094117.JPG', image: 'http://npmci.syncfusion.com/development/demos/src/images/employees/9.png' },
                        { nodeId: '04-01-02', nodeText: 'WIN_20160726_094118.JPG', image: 'http://npmci.syncfusion.com/development/demos/src/images/employees/3.png' },
                    ]
                },
                { nodeId: '04-02', nodeText: 'Wind.jpg', icon: 'images' },
                { nodeId: '04-03', nodeText: 'Stone.jpg', icon: 'images' },
            ]
        }
    ]
Previous
Next