Hi,
Whenever l click on the sidebar menu button (toggle) to view it in full mode (i.e. maximized state) it does not reflect on the panels on the dashboard component. The panels on the dashboad does not change in size. The grid control on customer component do resize to full mode and normal mode. Kindly assist. https://stackblitz.com/edit/angular-3s6d4b-au8hqo?file=app%2Fcustomer-list%2Fcustomer-list.component.ts,app.component.ts
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('sidebarTreeviewInstance')
public sidebarTreeviewInstance: SidebarComponent;
public data: { [key: string]: Object }[] = [
{
nodeId: '01',
nodeText: 'Dashboard',
iconCss: 'icon-microchip icon',
},
{
nodeId: '02',
nodeText: 'Customer-List',
iconCss: 'icon-thumbs-up-alt icon',
},
];
public width: string = '230px';
public target: string = '.main-sidebar-content';
public mediaQuery: string = '(min-width: 600px)';
public fields: object;
constructor(private router: Router) {
this.fields = {
dataSource: this.data,
id: 'nodeId',
text: 'nodeText',
child: 'nodeChild',
iconCss: 'iconCss',
selected: 'selected',
};
}
toolbarCliked(): void {
this.sidebarTreeviewInstance.toggle();
}
created() {
var nodes = this.treeviewInstance.getTreeData();
for (var i = 0; i < nodes.length; i++) {
var path = window.location.pathname;
if (nodes[i].url === path.slice(1, path.length - 1)) {
var item = nodes[i].nodeId;
var listItems = document.querySelectorAll('.e-list-item');
for (var i = 0; i < listItems.length; i++) {
if (listItems[i].classList.contains('e-active')) {
listItems[i].classList.remove('e-active');
}
if (item === listItems[i].getAttribute('data-uid')) {
//select the corresponding node
listItems[i].classList.add('e-active');
}
}
}
}
}
public loadRoutingContent(args: NodeSelectEventArgs): void {
let data1: any = this.treeviewInstance.getTreeData(args.node);
let routerLink: string = data1[0].url;
this.router.navigate([routerLink]);
}
ngOnInit() {
this.router.navigate(['dashboard']);
}
public onCreated(args: any) {
this.sidebarTreeviewInstance.element.style.visibility = '';
}
}
<div class="control-section" id="reswrapper">
<!-- sample level element -->
<!-- header-section declaration -->
<div>
<ejs-toolbar id="resToolbar" (clicked)="toolbarCliked()">
<e-items>
<e-item prefixIcon="e-tbar-menu-icon tb-icons" tooltipText="Menu"></e-item>
<e-item>
<ng-template #template>
<div class="e-folder">
<div class="e-folder-name">BE </div>
</div>
</ng-template>
</e-item>
</e-items>
</ejs-toolbar>
</div>
<!-- end of header-section -->
<ejs-sidebar id="sideTree" class="sidebar-treeview" #sidebarTreeviewInstance [width]="width" [target]="target" (created)="onCreated($event)" style="visibility: hidden"
[mediaQuery]="mediaQuery" [isOpen]="true">
<div class='main-menu'>
<div class="table-content">
<ejs-textbox id="resSearch" placeholder="Search..."></ejs-textbox>
<p class="main-menu-header">TABLE OF CONTENTS</p>
</div>
<div>
<ejs-treeview id='mainTree' #treeviewInstance cssClass="main-treeview" [fields]="fields"
(nodeSelected)="loadRoutingContent($event)" expandOn='Click'>
</ejs-treeview>
</div>
</div>
</ejs-sidebar>
<!-- end of sidebar element -->
<!-- .main-sidebar-content declaration -->
<div class="main-sidebar-content" id="main-text">
<div class="sidebar-content">
<router-outlet></router-outlet>
</div>
</div>
</div>
Regards
Charles
