I have jqxSplitter with two panels. Left one is menu and the right one is content.
Following this algorithm:
1. Create docking window inside jqxSplitter panel.
This goes to right panel
<div id="docking">
<div>
<div id="window3">
<div>
Zodiac
</div>
<div style="overflow: hidden;">
<div id="zodiak">
<h3>Leo</h3>
<span style="font-size: 11px">
Individuals born under the zodiac signof Leo are very...</span>
</div>
</div>
</div>
</div>
</div>
and aplying jqwidgets:
$('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: '100%', mode: 'docked' });
Try to collapse/expand left panel, docking width working as expected, 100% filled the right panel.
2. delete docking using $('#docking').jqxDocking('destroy');
3. Add the same html and try to create jqxDocking object again with the same javascript code:
$('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: '100%', mode: 'docked' });
4. Try to collapse/open left panel again, now jqxDocking is not changing it size (now it fixed size) as it was first time.
Looking at your source code of jqxDocking, after creating jqxDocking object second time this part stopped getting triggered to perform proper resizing:
In _addEventListeners
function:
a.jqx.utilities.resize(this.host, function () {
c._performLayout()
})
Please let me know if you want me to provide additional code of jqxSplitter initialization. However jqxGrid works fine when repeat the same algorithm.