Welcome to Simon Philp's Blog

Podcast Kicks
Thursday, November 08, 2007 12:55 PM

This is very straightforward and can add some extra functionality to your forms in the sense of if this value is selected show that div. 

Within the asp.net page we add the control to the page:

<asp:RadioButtonList ID="grpLocation" runat="server" RepeatDirection="Horizontal" 
OnDataBound="grpLocation_onDataBound"> </asp:RadioButtonList> 

Within the code behind we add some listitems to the Radio button list:

ListItem A = new ListItem("Edinburgh", "Edinburgh");
ListItem B = new ListItem("Glasgow", "Glasgow");
ListItem C = new ListItem("Aberdeen", "Aberdeen");
ListItem D = new ListItem("Scotland", "Scotland");
grpLocation.Items.Add(A);
grpLocation.Items.Add(B);
grpLocation.Items.Add(C);
grpLocation.Items.Add(D); grpLocation.DataBind();

In the code behind we add the following code to the grpLocation_onDataBound event:

 RadioButtonList rbl = (RadioButtonList)sender;
        foreach (ListItem li in rbl.Items)
        {
            li.Attributes.Add("onclick", "javascript:ShowExt('" + li.Value + "')");
        }

 

What the above code is saying is add the attribute "onclick" to each list item within the RadioButtonList with a value of "javascript:ShowExt('value')".

For the above example to work we'll also need to add the javascript function "ShowExt" to the page:

 <script language=javascript type="text/javascript">
    function ShowExt(object)
    {
    alert("Value Clicked :" + object);
    }
    </script>

What the above code will do is show an alert box with the value of the radio item. Short, simple and sweet.

Click here to see a live demo

Filed Under [ C# | Web Development | ]

Comments

Gravatar
# re: Adding a Javascript onclick event to a Radio Button List Item on DataBound
Posted by Anil Amuluru on 3/20/2008 5:16 PM
Works Very Nice and smooth.
Gravatar
# re: Adding a Javascript onclick event to a Radio Button List Item on DataBound
Posted by Timmy on 4/16/2008 4:04 PM
I have a strange issue where I make a selection to my radio button list, and the selection disappears again. The main control has its onclick event which checks which button was checked and then hides/shows tablerows. Here's a preview:

function RadioButtonClick()
{
//alert('2');
if (document.getElementById('UC_FCSearch1_rbl_GroupBy_2').checked == true)
{
document.getElementById('tr_PartType').style.display = 'none';
document.getElementById('tr_ProdText').style.display = 'block';
//document.getElementById('UC_FCSearch1_rbl_GroupBy_2').checked = true;
}
else if (document.getElementById('UC_FCSearch1_rbl_GroupBy_1').checked == true)
{
document.getElementById('tr_PartType').style.display = 'block';
document.getElementById('tr_ProdText').style.display = 'none';
//document.getElementById('UC_FCSearch1_rbl_GroupBy_1').checked = true;
}
else if (document.getElementById('UC_FCSearch1_rbl_GroupBy_0').checked == true)
{
document.getElementById('tr_PartType').style.display = 'block';
document.getElementById('tr_ProdText').style.display = 'none';
//document.getElementById('UC_FCSearch1_rbl_GroupBy_0').checked = true;
}
return false;
}

The script runs as expected, except for the button looks like it is deselected. No post back is made.

Thanks in advance! :-)
Your solution is pretty tidy I agree. Databinding is the way forward once your mastery of it matures.
Gravatar
# re: Adding a Javascript onclick event to a Radio Button List Item on DataBound
Posted by Timmy on 4/16/2008 4:44 PM
Hey, I managed to solve that last problem (though it may appear under this post). I assigned the attribute on page load, like a good boy, but as onClick and not onclick.

So "onclick" and NOT "onClick". Silly eh? :-)
Gravatar
# re: Adding a Javascript onclick event to a Radio Button List Item on DataBound
Posted by Si Philp on 4/16/2008 7:12 PM
Hi Timmy,
I'm glad you discovered your problem :) The first post was caught in the spam filter.
If you run into any other problems on this post or any other please feel free to leave a comment or fire me an email from my contact form :)
Also be sure to check out part 2 to this post Adding a Javascript onclick event to a Radio Button List Item on DataBound Pt 2.
Gravatar
# re: Adding a Javascript onclick event to a Radio Button List Item on DataBound
Posted by Wayne on 7/18/2008 11:18 PM
Just what I needed in a pinch! Thanks for the assist! :)
Comments have been closed on this topic.