[Solved] RadGrid Repaint Issue Scrolling Dynamic Rows

[Steve]

This is a tricky one to explain and there are issues on multiple levels.  I will do my best to explain the situation.

I have a RadGrid with 75 rows, 70 of which are hidden from server side code in ItemDataBound based on a column value.  I also have several columns that I hide in PreRender on the server side. 

So, upon first load, the grid shows 5 rows. (Image 1)

If the user clicks on a row, rows below it are shown via JavaScript:  masterTable.get_dataItems()[row].set_visible(true);

The Vertical scroll bar is placed such that all columns are shifted to the left.  (Image 2)

From this position (image 2), if I resize the browser window or call repaint the grid shifts again.  Now the scroll bar is outside the grid and the columns line up appropriately, although there's a gap between the data div and the footer.  (image 3)

Now, if I re-hide the rows, so I'm back to the original 5 rows, the scroll bar is removed and my columns shift to the right, making them offset again.  (image 4)

Finally, if I resize the browser window again, everything goes wrong. (image 5)  This final repaint causes all of my hidden columns to show.

Here is the grid markup:

<telerik:RadGrid ID="grid1" runat="server" AutoGenerateColumns="true" Style="min-height: 50px;"
    OnNeedDataSource="grid1_NeedDataSource" Skin="Office2007" ShowFooter="true">
    <MasterTableView CommandItemDisplay="Top" Width="885px">
        <CommandItemTemplate>
            <table class="rcCommandTable" width="100%">
                <td>
                    <asp:LinkButton ID="btnExpandAll" runat="server" OnClientClick="ExpandAll(true); return false;"  style="display: block;">
                        <img style="border:0px" alt="" src="../images/SinglePlus.gif" />
                        Expand All
                    </asp:LinkButton>
                    <asp:LinkButton ID="btnCollapseAll" runat="server" OnClientClick="ExpandAll(false); return false;" style="display: none;">
                        <img style="border:0px" alt="" src="../images/SingleMinus.gif" />
                        Collapse All
                    </asp:LinkButton>
                </td>
                <td style="float: right">
                    <asp:Button ID="Button1" runat="server" Text=" " CssClass="rgExpXLS" CommandName="ExportToExcel" ToolTip="Export to Excel" />

                    <asp:Button ID="Button2" runat="server" Text=" " CssClass="rgExpPDF" CommandName="ExportToPdf" ToolTip="Export to PDF" />
                </td>
            </table>
        </CommandItemTemplate>
        <CommandItemSettings ShowExportToExcelButton="true" ShowExportToPdfButton="true"
            ShowAddNewRecordButton="true" AddNewRecordText="Expand All" ShowRefreshButton="false"></CommandItemSettings>
    </MasterTableView>
    <ClientSettings EnableRowHoverStyle="true">
        <ClientEvents OnRowSelected="RowSelected"></ClientEvents>
        <Scrolling AllowScroll="true" SaveScrollPosition="true" FrozenColumnsCount="5" UseStaticHeaders="true" />
        <Resizing AllowColumnResize="false" />
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
    <ExportSettings IgnorePaging="true" OpenInNewWindow="true" ExportOnlyData="true" FileName="Grid-Export">
        <Pdf PageTitle="Risk Assessment" PageWidth="297mm" PageHeight="210mm"
            PageTopMargin="10mm" PageBottomMargin="10mm" PageLeftMargin="10mm" PageRightMargin="10mm" />
        <Excel Format="ExcelML" FileExtension="xls" />
    </ExportSettings>
    <HeaderStyle Width="150px" />
</telerik:RadGrid>

I can deal with the slight shifts, although I'd prefer a resolution.  But at the very least I need to stop the grid from showing the hidden columns when it repaints.  Any help would be appreciated.

Thanks,

Steve

[Pavlina]

Hello Steve,

I already answered your support ticket opened on the same matter. Lets continue our communication there in order to avoid duplicate posts.

Greetings,
Pavlina
the Telerik team