Integrate treeview inside the accordion in React Accordion component

30 Jan 20239 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.

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.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
import { TreeView } from '@syncfusion/ej2-navigations';
import { DocDB, DownloadDB, PicDB } from 'datasource.ts';
function ReactApp() {
    let acrdnInstance;
    return (<AccordionComponent ref={acrdn => acrdnInstance = acrdn} expandMode='Single' expanding={expanding}>
      <AccordionItemsDirective>
        <AccordionItemDirective header='Documents' content='<div id="treeDoc"></div>'/>
        <AccordionItemDirective header='Downloads' content='<div id="treeDownload"></div>'/>
        <AccordionItemDirective header='Pictures' content='<div id="treePic"></div>'/>
      </AccordionItemsDirective>
    </AccordionComponent>);
    function expanding(e) {
        if (e.isExpanded && [].indexOf.call(acrdnInstance.items, e.item) === 0 && e.element.querySelector('#treeDoc').childElementCount === 0) {
            let treeObj = new TreeView({
                fields: { dataSource: DocDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
                sortOrder: 'Ascending'
            });
            treeObj.appendTo('#treeDoc');
        }
        if (e.isExpanded && [].indexOf.call(acrdnInstance.items, e.item) === 1 && e.element.querySelector('#treeDownload').childElementCount === 0) {
            let treeObj = new TreeView({
                fields: { dataSource: DownloadDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
                sortOrder: 'Ascending'
            });
            treeObj.appendTo('#treeDownload');
        }
        if (e.isExpanded && [].indexOf.call(acrdnInstance.items, e.item) === 2 && e.element.querySelector('#treePic').childElementCount === 0) {
            let treeObj = new TreeView({
                fields: { dataSource: PicDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
                sortOrder: 'Ascending'
            });
            treeObj.appendTo('#treePic');
        }
    }
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
import { ExpandEventArgs, TreeView } from '@syncfusion/ej2-navigations';
import { DocDB, DownloadDB, PicDB } from 'datasource.ts';

function ReactApp() {
  let acrdnInstance: AccordionComponent;
  return (
    <AccordionComponent ref={acrdn => acrdnInstance = acrdn} expandMode='Single' expanding={expanding}>
      <AccordionItemsDirective>
        <AccordionItemDirective header='Documents' content='<div id="treeDoc"></div>' />
        <AccordionItemDirective header='Downloads' content='<div id="treeDownload"></div>' />
        <AccordionItemDirective header='Pictures' content='<div id="treePic"></div>' />
      </AccordionItemsDirective>
    </AccordionComponent>
  );
  function expanding(e: ExpandEventArgs) {
    if (e.isExpanded && [].indexOf.call(acrdnInstance.items, e.item) === 0 && e.element.querySelector('#treeDoc').childElementCount === 0) {
      let treeObj: TreeView = new TreeView({
        fields: { dataSource: DocDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
        sortOrder: 'Ascending'
      });
      treeObj.appendTo('#treeDoc');
    }
    if (e.isExpanded && [].indexOf.call(acrdnInstance.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.isExpanded && [].indexOf.call(acrdnInstance.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');
    }
  }
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);
<!DOCTYPE html>
<html>
<head>
    <title>Syncfusion React Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='element'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>