DockingLayout onload issues

[venuguggillavvParticipant]

Hi,
I am using the recent version of JQX DockingLayout in angular.
i have integrated in my project and i’m facing the problem’s onload and onclick events are not working, can anyone help to solve the same.
And in my project we need the tab on the header not on the bottom.

[HristoParticipant]

Hello venuguggillavv,

Could you clarify it?
The jqxDockingLayout does not have the onload and the onclick events.
About the tabs on the header, if I understand you right, you could customize it as you wish.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[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.

[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”);
}

}

[HristoParticipant]

Hello venuguggillavv,

For Angular, you could use the Dynamic Injection approach to add new components wherever you want.
Please, take a look at this tutorial.
On the other hand, with the addFloatGroup method you could add a new layout:
https://stackblitz.com/github/jqwidgets/angular/tree/master/dockinglayout/idelikelayout/
Also, I would like to suggest another of our library – Smart HTML Elements.
Especially, I mean the Smart DockingLayout:
https://www.htmlelements.com/demos/docking-layout/drop-position/
There all tabs are on the top (header) by default.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts