Vinz' Blog

"Code, Beer and Music" ~ my way of being a programmer!
posts - 124, comments - 367, trackbacks - 0

My Links

News

Archives

Image Galleries

Selecting One RadioButton Vertically and Horizontally

Recently I have encountered a question at the aspnet forums asking if how to select only one RadioButton vertically and horizontally in a Table.( see this thread). As you can see from that thread, the first solution that I was provided was to use a RadioButtonList Control because it allows you to set the RepeatColumns, RepeatDirection and RepeatLayout attributes. But unfortunately that doesn't actually meets the requirement of the Original Poster (OP). Basically the OP wanted to Select only one RadioButton for each columns in the Table PLUS select only one RadioButton per Row, this means that a row cannot have the same RadioButton Selected.

Since we cannot set multiple GroupName in a RadioButtons so the second solution that i was provided is to use JavaScript for validating the selection of Rows and use GroupName for each columns. See the following example below:

Consider that we have this mark up below:


        <div>

        <asp:RadioButton ID="RadioButton1" runat="server" GroupName="Column1Group" Text="A" />      

        <asp:RadioButton ID="RadioButton4" runat="server" GroupName="Column2Group" Text="D" />

        <br />

        <asp:RadioButton ID="RadioButton2" runat="server" GroupName="Column1Group" Text="B" />

        <asp:RadioButton ID="RadioButton5" runat="server" GroupName="Column2Group" Text="E" />

        <br />

        <asp:RadioButton ID="RadioButton3" runat="server" GroupName="Column1Group" Text="C" />

        <asp:RadioButton ID="RadioButton6" runat="server" GroupName="Column2Group" Text="F" />

        <br />

        </div>


As you noticed, the RadioButton are Grouped by Columns so that we can only select ONE RadioButton for each Column. see the page output below:




As you can see from the output above we can still select RadioButtons in a row. To avoid this then we can use JavaScript for validating the selection of RadioButton in a Row.

Here's are the code blocks below:


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

        <script type="text/javascript" language="javascript">

        function Validate(obj1, obj2)

        {

            var box1 = document.getElementById(obj1);

            var box2 = document.getElementById(obj2);

            

            if(box1.checked == true)

            {

                box2.checked = false;

            }

           

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

        <asp:RadioButton ID="RadioButton1" runat="server" GroupName="Column1Group" Text="A" onclick="Validate('RadioButton1','RadioButton4');"/>      

        <asp:RadioButton ID="RadioButton4" runat="server" GroupName="Column2Group" Text="D" onclick="Validate('RadioButton4','RadioButton1');"/>

        <br />

        <asp:RadioButton ID="RadioButton2" runat="server" GroupName="Column1Group" Text="B" onclick="Validate('RadioButton2','RadioButton5');"/>

        <asp:RadioButton ID="RadioButton5" runat="server" GroupName="Column2Group" Text="E" onclick="Validate('RadioButton5','RadioButton2');"/>

        <br />

        <asp:RadioButton ID="RadioButton3" runat="server" GroupName="Column1Group" Text="C" onclick="Validate('RadioButton3','RadioButton6');"/>

        <asp:RadioButton ID="RadioButton6" runat="server" GroupName="Column2Group" Text="F" onclick="Validate('RadioButton6','RadioButton3');"/>

        <br />

        </div>

    </form>

</body>

</html>


As you can see, the code was pretty straight forward and easy... :)

That's it! Hope you will find this example useful!

Print | posted on Monday, June 01, 2009 5:24 PM |

Feedback

No comments posted yet.
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

Powered by: