Filtering or grouping grid gives an empty page

[Al]

Hi,

I have a grid with the definition below, DataSource is set to a DataTable in NeedDataSoruce & the grid shows up fine. When Dragging a column to the group area or selecting a filter then the grid disappears, what could be the problem?

<telerik:RadGrid ID="RadGrid1" runat="server" Height="99%" OnNeedDataSource="RadGrid1_NeedDataSource1" CssClass="startInvisible"
    AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" GroupPanelPosition="Top" ShowGroupPanel="True"
    AllowMultiRowSelection="True" OnColumnCreated="RadGrid1_ColumnCreated" OnPreRender="RadGrid1_PreRender">
    <ClientSettings AllowDragToGroup="True" >
        <Selecting AllowRowSelect="True" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        <Resizing AllowColumnResize="True" AllowResizeToFit="True" ResizeGridOnColumnResize="true" />
        <ClientEvents OnGridCreated="GridCreated" />
    </ClientSettings>
    <MasterTableView >
        <RowIndicatorColumn Visible="False">
        </RowIndicatorColumn>
        <Columns>
            <telerik:GridClientSelectColumn FilterControlAltText="Filter ClientSelectColumn column" UniqueName="ClientSelectColumn">
            </telerik:GridClientSelectColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

[Al]

I see now the problem is due to my css startInvisible where the grid is initially invisible and then resized and made visible in document.ready.

[Konstantin Dikov]

Hi Al,

If you have enabled AJAX for your RadGrid, you need to handle the client-side pageLoad event for changing the visibility of your grid:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function pageLoad() {
            var grid = $find("<%=RadGrid1.ClientID%>");
            grid.get_element().className = grid.get_element().className.replace("startInvisible", "");
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadAjaxPanel runat="server">
    <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" CssClass="startInvisible" ShowGroupPanel="true">
        <ClientSettings AllowDragToGroup="True">
            <Selecting AllowRowSelect="True" />
        </ClientSettings>
    </telerik:RadGrid>
</telerik:RadAjaxPanel>

Regards,
Konstantin Dikov
Telerik