Attributes for Radio Button List in datagrid

I have a datagrid that is listing donation options.  Each donation option has a few recommended amounts.  The recommended amounts is stored in the database as a comma seperated list.  The list is then split and the resulting array is used to bind to the radio button list.  Also in each row of the datagrid is a textbox.  This is to allow values other than the recommended amounts.  What I want to happen is.....when someone selects a radio button the value is placed into the text box.  Also, when you focus on the textbox, the radio button should be deselected.  I also want this to happen without posting back.

This was fairly easy in ASP classic.....not sure how to get it to go in .NET.

What is the easiest way to accomplish this?

Thanks for your help.

Daniel
dbashley1Asked:
Who is Participating?
 
shovavnikConnect With a Mentor Commented:
Ah. Right. I forgot about that part.

You can create a handler for the DataGrid.OnItemDataBound event and then in the code behind file add the following attribute to each textbox, in this way:

Assuming column 0 is the column with all these controls (as it is in your code):

Control textBox = e.Item.Cells[ 0 ].FindControl( "txtAmount" );
textBox.Attributes[ "onfocus" ] = "focusTextBox();";
textBox.Attributes[ "id" ] = "txtAmount" + e.Item.DataItem[ "ID" ]; // or whatever your identity column is named
textBox.Attributes[ "base" ] = e.Item.DataItem[ "ID" ]; // or whatever your identity column is named

And apply similar logic to the RadioButtonList after you add an identity (or group name?) attribute to the RadioButtonList in your aspx file:
Control radioList = e.Item.Cells[ 0 ].FindControl( "radioListGroupName" );
radioList.Attributes[ "onclick" ] = "selectRadio();";
radioList.Attributes[ "id" ] = "radioList" + e.Item.DataItem[ "ID" ]; // or whatever your identity column is named
radioList.Attributes[ "base" ] = e.Item.DataItem[ "ID" ]; // or whatever your identity column is named


And then modify my script block as follows:
<script>
function focusTextBox() {
  var obj = event.srcElement;
  var base = obj.base;
  var radios = document.getElementsByName( 'radioList' + base );
  for( index = 0; index < radios.length; index++ ) {
    radios[ index ].checked = false;
  }
}
function selectRadio() {
  var obj = event.srcElement;
  var base = obj.base;
  var textbox = document.getElementByID( 'txtAmount' + base );
  textBox.value = obj.value;
}
</script>
0
 
shovavnikCommented:
What you need to do is create a couple of generic javacript functions on the client-side, exactly the same way you would if you were working with classic ASP.

You'll need a function for selecting a radio button, which will update the associated textbox, and another function for the onfocus event of the textbox to deselect the radio button.  If you need help with the javascript, let us know.

The hard part is associating a set of radio buttons with a textbox.  One way that I've found convenient, is to add a "fake" attribute to my radio buttons and the textbox that gives me quick access to the associated controls on the client-side.  For example:
<asp:RadioButton id="myradios1" base="1" Text="hello" value="1" selected="true"></asp:RadioButton>
<asp:RadioButton id="myradios1" base="1" Text="hello again" value="2"></asp:RadioButton>
<asp:RadioButton id="myradios1" base="1" Text="and again" value="3"></asp:RadioButton>
<asp:TextBox id="textbox1" base="1" Text="hello"></asp:TextBox>

On the client-side, you'd response to the events:
<script for="textbox1" event="onfocus">
var obj = event.srcElement;
var base = obj.base;
var radios = document.getElementsByName( 'myradios' + base );
for( index = 0; index < radios.length; index++ ) {
  radios[ index ].checked = false;
}
</script>

That's the general idea.
0
 
dbashley1Author Commented:
shovanik,

That is an interesting solution....

I need a little more info.....because the number of donation options is not fixed, how do I create a script that handles all the possible text boxes?  I have attaced the code below.

<asp:DataGrid HorizontalAlign="Center" ShowHeader=False Width="660px" id="dgrCategoryOptions" AutoGenerateColumns=False DataSource='<%# getOptions(databinder.eval(container.dataItem, "idDonationCategory"))%>' Runat=server>
                                                                                    <Columns>
                                                                                          <asp:TemplateColumn>
                                                                                                <ItemTemplate>
                                                                                                      <table style="text-indent:15pt;" align="center" width="660px">
                                                                                                            <tr>
                                                                                                                  <td align="left">
                                                                                                                        <asp:RadioButtonList RepeatDirection=Horizontal DataSource='<%# getOptionIncrements(container.dataItem("DonationIncrements"))%>' Runat=server>
                                                                                                                        </asp:RadioButtonList></td>
                                                                                                                  <td align="right">
                                                                                                                        Amount:&nbsp;
                                                                                                                        <asp:TextBox ID="txtAmount" Runat="server"></asp:TextBox>
                                                                                                                  </td>
                                                                                                            </tr>
                                                                                                            <tr style="text-indent:15pt;">
                                                                                                                  <td><%# container.dataItem("DonationDescription") %></td>
                                                                                                            </tr>
                                                                                                      </table>
                                                                                                </ItemTemplate>
                                                                                          </asp:TemplateColumn>
                                                                                    </Columns>
                                                                              </asp:DataGrid>



Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.