|
App.component.ts
export class AppComponent {
public data: Object[];
@ViewChild('grid')
public grid: GridComponent;
@ViewChild('sidebardemo')
public sidebar: SidebarComponent;
public pageOptions: Object;
ngOnInit(): void {
this.data = data;
this.pageOptions = { pageCount: 2, pageSizes: true };
this.sidebar.width = 700;
}
btnClick(args) {
this.sidebar.toggle();
( this.grid.element.offsetWidth > 700) ? this.grid.element.classList.add('e-resizepager') :
this.grid.element.classList.remove('e-resizepager');
}
created () {
( this.grid.element.offsetWidth > 700) ? this.grid.element.classList.add('e-resizepager') :
this.grid.element.classList.remove('e-resizepager');
}
}
App.component.html
<div>
<ejs-sidebar id="sidebardemo" #sidebardemo>
<div class="title-header">
<div style="display:inline-block"> Sidebar</div>
<span id="close" class="e-icons" (click)="closeClick()"></span>
</div>
<div class="sub-title">
Demo side bar </div>
</ejs-sidebar>
<div>
<div class="title default">Main content</div>
<button ejs-button (click)="btnClick()" >Toggle side bar</button>
<ejs-grid #grid height = '100%' width= '100%' [allowPaging]="true"
[dataSource]='data' (created)="created($event)"
[pageSettings]='pageOptions'
id="default-grid">
. . .
</ejs-grid>
<div>
</div> | 
