nested dockingLayout

[accParticipant]

Hi
I have one outermost docking area layoutGroup with one documentGroup in its items
And I want to create inner docking area for each documentPanel:

$outerDockingArea.jqxDockingLayout({
width: ‘100%’, height: ‘100%’,
layout:[{
type: ‘layoutGroup’, orientation: ‘horizontal’,
items:[{type: ‘documentGroup’, width: ‘100%’, height: ‘100%’, items:[/*outerpanels*/]}]
}]
});

$innerDocking.jqxDockingLayout({
width: ‘100%’, height: ‘100%’,
layout:[{
type: ‘layoutGroup’, orientation: ‘horizontal’,
items: [
{type: ‘tabbedGroup’, width:’20%’, height:’100%’,items:[/*inner panels*/]},
{type: ‘layoutGroup’,orientation: ‘vertical’,width:’85%’,
items:[{type: ‘documentGroup’, height: ‘65%’, items:[/**/]},{type: ‘tabbedGroup’, height: ‘35%’, items:[/**/]}]
}]
}]
})

<div id=”outer-docking-area”>
<div data-container=”OuterPanel1″>
<div id=”inner-docking”>
<div>
<div data-container=”InnerPanel1″></div>
<div data-container=”InnerPanel2″></div>
<div data-container=”InnerPanel3″></div>
<div data-container=”InnerPanel4″></div>
<div data-container=”InnerPanel5″></div>
</div>
</div><!– inner-docking –>
</div>

<div data-container=”OuterPanel2″></div>
<div data-container=”OuterPanel3″></div>
</div>

But while I D&D the outer or inner panels
Layout will eventually result in a mess?

How can I have my outer most docking area, with each having its own docking area?

Thanks and best regards

acc

[DimitarParticipant]

Hi acc,

Nesting different instances of jqxDockingLayout is not supported. We suggest you have only one instance and make its layout more complex so that it suits your needs (the layout property (array) allows for many-level nesting).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[accParticipant]

Ok, I see

Thank you 🙂

[Author]

Posts