Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

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”> 
        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!

 

Technorati Tags: ,,
Posted on Monday, June 1, 2009 5:24 PM ASP.NET , JavaScript , Tips&Tricks | Back to top


Comments on this post: Selecting One RadioButton Vertically and Horizontally

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net