GridView/ObjectDataSource inside runat=server container does not bind

Question

I've got a small web form with 2 radio buttons, call them PickFromList and EnterValue. When PickFromList is checked I want to show a GridView that I've configured to bind to an ObjectDataSource. When EnterValue is checked I want the GridView to disappear.

This form is laid out using a table and want to hide/show the appropriate rows based on appropriate data and user input.

Unfortunately the GridView doesn't bind when the trPickFromList2 row specifies the id and the runat="server" attributes. If I remove id and runat="server" from the trPickFromList2 row it binds successfully.

Any ideas?

<table id="tblOptions" runat="server">
    <tr id="trPickFromList1" runat="server">
        <td>
            <asp:RadioButton ID="rbFromList" runat="server" GroupName="Selection" 
                Text="Get Data From Existing Item" AutoPostBack="True" 
                oncheckedchanged="rbromList_CheckedChanged" />
        </td>
    </tr>
    <tr id="trPickFromList2" runat="server">
        <td style="padding-left:20px">
            <asp:GridView ID="gvList" runat="server" AutoGenerateColumns="False" 
                DataSourceID="odsList" Width="400px" onrowdatabound="gvList_RowDataBound">
                <Columns>
                    ...
                </Columns>
            </asp:GridView>
        </td>
    </tr>
    <tr id="trEnterValue1" runat="server">
        <td>
            <asp:RadioButton ID="rbEnterValue" runat="server" GroupName="Selection" 
                            Text="Create a New Item"
                            AutoPostBack="True" 
                            oncheckedchanged="rbEntered_CheckedChanged" />
        ...

Answer 1

Why dont you just show/hide the TRs with javascript? That way you won't have this problem and you'll have a much more responsive UI.

With jQuery:

$('.classOnShowRadioButton').click(function(){ $('.trToShow').show(); $('.trToHide').hide(); });

then obviously do the reverse for the other radio button.

Answer 2

I ended up implementing Wilco Bauwer's RowSelectorField control to solve this problem. It's not a perfect solution in that the control surfaces the the selected row's index value rather than the selected data key value(s); however, it worked out well.

Answer 3

hmm.. not quite sure but something which has got me a few times is have the AutoWireEvents set to false, its at the top in the <% page /%> section. sorry if it's no help, but something annoying and insignificant like that is prob the problem.

Answer 4

If the AutoWireEvents answer Joe suggested is not the issue, you could also try removing the runat=server from the tr tags, and instead wrap them with placeholders and use the placeholders to control visibility. (Note, don't use panels, as it will result in invalid html)

Answer 5

I noticed the same behavior with a FormView inside a TR tag with runat="server"

Answer 6

Any particular reason you're using a table for layout? Try taking all your controls out of the table, and make the radio buttons just make the actual GridView visible/invisible.