I have no idea how this is happening, but when I try to set the default panel to open using class='k-state-active' the page loads and then the page loads again inside the open panel.
The HTML:
<ul id="strategyPanels">
<li class="k-state-active">Asset Class Allocator
<div id="assetClassAllocator"></div>
</li>
<li>Fund Allocator
<div>investment fund stuff</div>
</li>
<li>Cost Calculator
<div>cost calculator</div>
</li>
</ul>
and the script:
$('#strategyPanels').kendoPanelBar();
There is more JavaScript initializing a Kendo Grid using the assetClassAllocator DIV.
Note: If I set the second panel as active it works fine:
<ul id="strategyPanels">
<li>Asset Class Allocator
<div id="assetClassAllocator"></div>
</li>
<li class="k-state-active">Fund Allocator
<div>investment fund stuff</div>
</li>
<li>Cost Calculator
<div>cost calculator</div>
</li>
</ul>
Same goes for the third panel.
Another Option:
I've even tried doing this directly via JavaScript, but it does the same thing.
//setup panel bars
$('#strategyPanels').kendoPanelBar();
var panelBar = $('#strategyPanels').data('kendoPanelBar');
panelBar.expand($('#strategyPanels li:first-child'));
So it would seem that this has something to do with the Kendo Grid in the first panel.
What potential issues could cause the panel bar to behave like this?
Regards,
Jacques