[venuguggillavvParticipant]

this code in angular 8….
this is my html
<div style=”width: 35px; height: calc(100vh – 36px); float: left;”>
<button (click)=”leftNavItem1()”>BTN1</button>
<button (click)=”leftNavItem2()”>BTN2</button>
</div>
<div style=”width: calc(100% – 36px); height: calc(100vh – 36px); float: left;”>
<jqxDockingLayout #dockingLayoutReference [width]=”‘100%'” [height]=”‘100%'” [layout]=”layout”>

<div data-container=”Document1Panel”>
Document 1 content
<button (click)=”leftNavItem4()”>BTN4</button>
</div>
<div data-container=”Document2Panel”>
Document 2 content
</div>
<div data-container=”Explorer”>
<div id=”test01″>
Explorer this is for test
<button (click)=”leftNavItem3()”>BTN3</button>
</div>

<div style=”height: 100px;”></div>
</div>
<div data-container=”Properties”>
Properties

</div>
<div data-container=”SolutionExplorerPanel”>
</div>
<div data-container=”SolutionExplorerPanel1″>
</div>

</jqxDockingLayout>

</div>

this is my typescript

export class ResizableComponent{
layout: any[] = this.generateLayout();
getWidth() : any {
if (document.body.offsetWidth < 800) {
return ‘90%’;
}
return 800;
}
generateLayout(): any[] {
let layout = [{
type: ‘layoutGroup’,
orientation: ‘horizontal’,
items: [

{
type: ‘layoutGroup’,
orientation: ‘vertical’,
width: ‘30%’,
items: [

{
type: ‘tabbedGroup’,
height: ‘50%’,
pinnedHeight: ‘10%’,
items: [{
type: ‘layoutPanel’,
title: ‘Explorer’,
contentContainer: ‘Explorer’,

}]
},
{
type: ‘tabbedGroup’,
height: ‘50%’,
pinnedHeight: ‘10%’,
items: [{
type: ‘layoutPanel’,
title: ‘Properties’,
contentContainer: ‘Properties’
}]
}]
},
{
type: ‘layoutGroup’,
orientation: ‘vertical’,
width: ‘70%’,
items: [
{
type: ‘documentGroup’,
height: ‘60%’,
minHeight: ‘25%’,
items: [{
type: ‘documentPanel’,
title: ‘Pipeline’,
contentContainer: ‘Document1Panel’
}, {
type: ‘documentPanel’,
title: ‘Pipeline 02’,
contentContainer: ‘Document2Panel’
}]
},
{
type: ‘tabbedGroup’,
height: ‘40%’,
pinnedHeight: ‘10%’,
items: [{
type: ‘layoutPanel’,
title: ‘Error List’,
contentContainer: ‘ErrorListPanel’
}]
}]
}]
}];
return layout;
}

ngOnInit() {

leftNavItem1() {
alert(“01”);
}
leftNavItem2() {
alert(“02”);
}
leftNavItem3() {
alert(“03”);
}
leftNavItem4() {
alert(“04”);
}

}

[venuguggillavvParticipant]

Hello Hristo,
thank your for replay,

The project is running in angular and now it is fixed layout and now we want to have dock-able layout.
in our project we have dragging a widgets one panel to other panel and dropping widgets. then the configuration panel appears, give the inputs and click the buttons to save.

1. how to load a widgets on page-load
2. button click function or not working

can you please help me.

[Author]

Posts