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.