Solved

Attributes for Radio Button List in datagrid

Posted on 2004-08-25
4
304 Views
Last Modified: 2008-01-16
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
0
Comment
Question by:dbashley1
  • 2
4 Comments
 
LVL 8

Expert Comment

by:shovavnik
ID: 11892337
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
 

Author Comment

by:dbashley1
ID: 11892407
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
 
LVL 8

Accepted Solution

by:
shovavnik earned 500 total points
ID: 11893026
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now