Grid Pager in Panel keeps disappearing after collapsing and expanding the panel.

[Sean]

Hi I have a grid in a panel that is collapsible , After collapsing it once and expanding it back again the Grid pager keeps on breaking , it either completely disappears or shows few icons or color . I only get this issue on IE . Its like the color and icons don't load even if the elements are present and appears right after i hover on them.

 

<div class="panel-collapse collapse in" aria-expanded="true">
                <div class="panel-body">
  
<div class="row">
    <div class="col-md-12">
        <div class="k-grid k-widget k-display-block k-reorderable" style="touch-action: none;" data-role="grid"><div class="k-grid-header" style="padding-right: 17px;">

        <div class="k-grid-header-wrap k-auto-scrollable" style="touch-action: none;" data-role="resizable"><table role="grid"><colgroup><col style="width: 171px;"><col style="width: 866px;"></colgroup><thead role="rowgroup"><tr role="row"><th class="k-header k-with-icon" role="columnheader" aria-haspopup="true" style="display: none;" rowspan="1" scope="col" data-role="columnsorter" data-index="0" data-groupable="false" ><a tabindex="-1" title="Column Settings" class="k-header-column-menu" aria-label="Column Settings" href="#"><span class="k-icon k-i-more-vertical"></span></a><a class="k-link" href="#">supplier Key</a></th>

        <th class="k-header k-with-icon" id="eee9c67b-6b9f-406b-a7bb-0eff143ce03f" role="columnheader" aria-haspopup="true" rowspan="1" scope="col" data-index="1" data-groupable="false" data-title="Number" ><a tabindex="-1" title="Column Settings" class="k-header-column-menu" aria-label="Column Settings" href="#">

        <span class="k-icon k-i-more-vertical"></span></a><a class="k-link" href="#">Number</a></th>
        <th class="k-header k-with-icon" role="columnheader" aria-haspopup="true" rowspan="1" scope="col" data-role="columnsorter" data-index="2" data-groupable="false" data-title="Name">
        <a tabindex="-1" title="Column Settings" class="k-header-column-menu" aria-label="Column Settings" href="#">
        <span class="k-icon k-i-more-vertical"></span></a><a class="k-link" href="#">Name</a></th></tr></thead></table></div></div>


        <div class="k-grid-content k-auto-scrollable"><table class="k-selectable" role="grid" style="touch-action: none;" data-role="selectable"><tbody role="rowgroup">
        <tr role="row" data-uid="4ed3b8d6-6a84-4b24-a282-a06855c2c8be"><td role="gridcell" style="display: none;"></td><td role="gridcell">901176</td><td role="gridcell">Albert</td><td role="gridcell" style="display: none;">1155 Commerce Blvd</td></tr></tbody></table></div>


        <div class="k-pager-wrap k-grid-pager k-widget k-floatwrap" data-role="pager"><a tabindex="-1" title="Go to the first page" class="k-link k-pager-nav k-pager-first k-state-disabled" aria-label="Go to the first page" href="#" data-page="1">
        <span class="k-icon k-i-seek-w"></span></a><a tabindex="-1" title="Go to the previous page" class="k-link k-pager-nav  k-state-disabled" aria-label="Go to the previous page" href="#" data-page="1"><span class="k-icon k-i-arrow-w"></span></a><ul class="k-pager-numbers k-reset"><li class="k-current-page"><span class="k-link k-pager-nav">1</span></li><li><span class="k-state-selected">1</span></li></ul><a tabindex="-1" title="Go to the next page" class="k-link k-pager-nav  k-state-disabled" aria-label="Go to the next page" href="#" data-page="1"><span class="k-icon k-i-arrow-e"></span></a><a tabindex="-1" title="Go to the last page" class="k-link k-pager-nav k-pager-last k-state-disabled" aria-label="Go to the last page" href="#" data-page="1"><span class="k-icon k-i-seek-e"></span></a><span class="k-pager-sizes k-label"><span tabindex="0" title="" class="k-widget k-dropdown k-header" role="listbox" aria-busy="false" aria-disabled="false" aria-expanded="false" aria-haspopup="true" aria-activedescendant="5f49d1c3-a6fa-40d8-b943-42d71e570d1a" aria-owns="" unselectable="on"><span class="k-dropdown-wrap k-state-default" unselectable="on"><span class="k-input" unselectable="on">20</span><span class="k-select" aria-label="select" unselectable="on"><span class="k-icon k-i-arrow-60-down"></span></span></span><select style="display: none;" aria-label="20" data-role="dropdownlist"><option value="10">10</option><option selected="selected" value="20">20</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select></span>items per page</span><a title="Refresh" class="k-pager-refresh k-link" aria-label="Refresh" href="#"><span class="k-icon k-i-reload"></span></a><span class="k-pager-info k-label">1 - 3 of 3 items</span></div></div>
    </div>
</div>
</div>
</div>

[Preslav]

Hi Sean,

I am pasting my colleague's answer from the support ticket on the same topic in case anyone from the community encounters the same problem. 

Initializing a Grid widget within elements that are initially hidden, which is the case with panel bars or tab strips, will prevent the widget from calculating the correct sizes for its elements, so you need to handle the "Activate" event of the panel bar and call the "resize" or "refresh" method of the Grid. A HowTo article for the Kendo UI Grid, which is applicable in the same for the MVC Grid as well, could be found at the link below:

• http://docs.telerik.com/kendo-ui/controls/navigation/panelbar/how-to/initiliaze-grid-in-panelbar

Regards,
Preslav
Progress Telerik