This is a migrated thread and some comments may be shown as answers.

Setting first panel bar to be open using k-state-active reloads the entire page inside the panel bar container

1 Answer 308 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Jacques
Top achievements
Rank 2
Jacques asked on 05 Nov 2013, 07:48 AM
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

1 Answer, 1 is accepted

Sort by
0
Accepted
Jacques
Top achievements
Rank 2
answered on 05 Nov 2013, 08:10 AM
Found 'a' solution that works for me: 
//setup panel bars
$('#strategyPanels').kendoPanelBar(
    {
        expand: function (e)
        {
               //now run the code to create the Kendo Grid
               inializeGrid();
        }
    });
var panelBar = $('#strategyPanels').data('kendoPanelBar');
panelBar.expand($('#strategyPanels li:first-child'), false);
Waiting for the panel bar item to finish expanding seems to be the trick. Although this does indicate some kind of flaw with the PanelBar Grid combination. 
Tags
PanelBar
Asked by
Jacques
Top achievements
Rank 2
Answers by
Jacques
Top achievements
Rank 2
Share this question
or