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,
TreeView
module from ej2-navigations
, for adding TreeView. Please refer the TreeView initialization stepsexpanding
event,
by getting the element and defining the required TreeView properties.import { Component, ViewChild } from '@angular/core';
import { AccordionComponent } from '@syncfusion/ej2-angular-navigations';
import { Accordion, ExpandEventArgs, TreeView } from '@syncfusion/ej2-navigations';
import { DocDB, DownloadDB, PicDB } from './datasource.ts';
@Component({
selector: 'app-container',
template: `
<ejs-accordion #element (expanding)="expanded($event)">
<e-accordionitems>
<e-accordionitem expanded='true'>
<ng-template #header>
<div>Documents</div>
</ng-template>
<ng-template #content>
<div id="treeDoc"></div>
</ng-template>
</e-accordionitem>
<e-accordionitem>
<ng-template #header>
<div>Downloads</div>
</ng-template>
<ng-template #content>
<div id="treeDownload"></div>
</ng-template>
</e-accordionitem>
<e-accordionitem>
<ng-template #header>
<div>Pictures</div>
</ng-template>
<ng-template #content>
<div id="treePic"></div>
</ng-template>
</e-accordionitem>
</e-accordionitems>
</ejs-accordion>
`
})
export class AppComponent {
@ViewChild('element') acrdnInstance: AccordionComponent;
public expanded(e: ExpandEventArgs) {
if (e.isExpanded && [].indexOf.call(this.acrdnInstance.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.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');
}
}
ngAfterViewInit() {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccordionModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
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' },
]
}
]
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Accordion Sample</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/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<app-container>
<div id='loader'>LOADING....</div>
</app-container>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.accordion-control-section {
margin: 0 10% 0 10%;
}
.e-treeview .e-list-img {
width: 25px;
height: 25px;
}
/* Loading sprite image for TreeView */
.e-treeview .e-list-icon {
background-repeat: no-repeat;
background-image: url("./file_icons.png");
height: 20px;
}
/* Specify the icon positions based upon class name */
/* csslint ignore:start */
.e-treeview .e-list-icon.folder { background-position: -10px -552px }
.e-treeview .e-list-icon.docx { background-position: -10px -20px }
.e-treeview .e-list-icon.ppt { background-position: -10px -48px }
.e-treeview .e-list-icon.pdf { background-position: -10px -104px }
.e-treeview .e-list-icon.images { background-position: -10px -132px }
.e-treeview .e-list-icon.zip { background-position: -10px -188px }
.e-treeview .e-list-icon.audio { background-position: -10px -244px }
.e-treeview .e-list-icon.video { background-position: -10px -272px }
.e-treeview .e-list-icon.exe { background-position: -10px -412px }
/* csslint ignore:end */