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

2 posts, 1 answers
  1. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 05 Nov 2013 Link to this post

    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
  2. Answer
    Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 05 Nov 2013 Link to this post

    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. 
  3. Kendo UI is VS 2017 Ready
Back to Top