Telerik RadGrid Visible Property Not Working as Expected

I have two image buttons that hide and show a radgrid depending on what the client wants to see. When a button is clicked, the grid.visible property is set to true or false. The problem is that when I click the button the first time, the page posts back and does not work. Then I click a couple more times, and it shows only a horizontal line (I assume it is the grid not databound). I click a few more times and the grid shows and hides perfectly. However, when the user navigates away from the page and then comes back to this page, I get the same problem.

Any help would be appreciated.

.aspx

        <div class="RegistrationHistoryGrid" >
            <telerik:RadGrid ID="rgRegistrationHistory" Width="100%"  ShowHeader="true" AutoGenerateColumns="false" OnSelectedIndexChanged="rgRegistrationHistory_SelectedIndexChanged" AllowCustomPaging="true" AllowSorting="True" AllowPaging="True" PageSize="10" runat="server" Gridlines="None" CellSpacing="0" onneeddatasource="rgRegistrationHistory_OnNeedDataSource" >
                <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">
                    <Selecting AllowRowSelect="True" />
                </ClientSettings>
                <MasterTableView Width="100%" Summary="RadGrid table" DataKeyNames="ClientID, LastName, FirstName, Gender,DateOfBirth,Address">
                <Columns>
                    <telerik:GridBoundColumn HeaderText="Period" Reorderable="false" UniqueName="Period"  DataField="Period"/>
                    <telerik:GridBoundColumn HeaderText="Plate" Reorderable="false" UniqueName="Plate"  DataField="Plate"/>
                    <telerik:GridBoundColumn HeaderText="Comment" Reorderable="false" UniqueName="Comment"  DataField="Comment"/>
                        </Columns>
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="LastName" SortOrder="Ascending" />
                </SortEx开发者_开发知识库pressions>
            </MasterTableView>
                <PagerStyle Mode="NextPrevAndNumeric" />
                <FilterMenu EnableImageSprites="False"></FilterMenu>
                <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
                </telerik:RadGrid>
        </div>

.cs

protected void rgRegistrationHistory_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    List<int> fakeList = new List<int>();
    rgRegistrationHistory.DataSource = fakeList;
}

protected void imgChevronClosed_Click(object sender, ImageClickEventArgs e)
{
    imgChevronOpen.Visible = true;
    imgChevronClosed.Visible = false;
    rgRegistrationHistory.Visible = false;

}
protected void imgChevronOpen_Click(object sender, ImageClickEventArgs e)
{
    imgChevronOpen.Visible = false;
    imgChevronClosed.Visible = true;
    rgRegistrationHistory.Visible = true;
}

---

You have to rebind the grid when you toggle its visibility. See this article on the matter.

---

You can try consolidating your logic, and doing something like this instead:

Markup:

<asp:ImageButton ID="imgToggleGrid" runat="server" ImageUrl="~/images/hide.png" OnClick="imgToggleGrid_Click" />

<asp:PlaceHolder ID="plcGrid" runat="server">
    <!-- GRID -->
</asp:PlaceHolder>

Code-behind:

protected void imgToggleGrid_Click(object sender, EventArgs e)
{
    plcGrid.Visible = !plcGrid.Visible;        
    imgToggleGrid.ImageUrl = String.Format("~/images/{0}", plcGrid.Visible ? "hide.png" : "show.png");
}