Search results

Integrate Essential JS 2 TreeView inside the Accordion

02 Feb 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.jsx
index.html
index.tsx
Copied to clipboard
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 />);
Copied to clipboard
<!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="//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>
</head>

<body>
        <div id='element'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
Copied to clipboard
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 />);