Search results

Integrate Essential JS 2 TreeView inside the Accordion

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.

Source
Preview
index.tsx
index.html
data-source.jsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
import { Accordion, ExpandEventArgs, TreeView } from '@syncfusion/ej2-navigations';
import { DocDB, DownloadDB, PicDB } from 'datasource.ts';

let clickEle: HTMLElement;
class ReactApp extends React.Component<{}, {}> {
  public acrdnInstance:AccordionComponent;
  render() {
       return (
        <AccordionComponent  ref={acrdn => this.acrdnInstance = acrdn}  expandMode='Single' expanding= {this.expanding.bind(this)}>
            <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>
       );
  }
  public expanding (e: ExpandEventArgs) {
  if (e.isExpanded && [].indexOf.call(this.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(this.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(this.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');
  }
   }
}
ReactDOM.render(<ReactApp/>, document.getElementById("element"));
<!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/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>
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';
let clickEle;
class ReactApp extends React.Component {
    render() {
        return (<AccordionComponent ref={acrdn => this.acrdnInstance = acrdn} expandMode='Single' expanding={this.expanding.bind(this)}>
            <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>);
    }
    expanding(e) {
        if (e.isExpanded && [].indexOf.call(this.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(this.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(this.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');
        }
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));