How To Find If Any Radio Button Selected In A Dynamic List Within A Gridview

How to find out if any radio button selected within a grdiview or not, and the radio button is getting generated dyanmically, in that case how could you validate easliy, i am sharing the simple jquery solution.

Suppose you are creating an application using Asp.Net gridview, and you having a demand in your application to create dynamic radio button list, for example suppose you are creating a online test application where you have 4 optional answer of a question, and we are binding these questions and answer from our database using sqlserver and binding them in Gridview. So basically we don't know how many radio button are there? In the below code i will explain how we can do this easily with Jquery.

 

Aspx Code 

asp:GridView ID="grdquestions" runat="server" AutoGenerateColumns="false" OnRowDataBound="grdquestions_RowDataBound" DataKeyNames="QuestionId" Width="100%">
<Columns>
    <asp:TemplateField HeaderText="Asp .Net Online Test">
        <ItemTemplate>
            <table class="tableclass" id='<%#Eval("QuestionId") %>'>
                <tr>
                    <td>
                        <b>Question <%#Eval("QuestionId") %> -: <%#Eval("Question") %>
                        </b>
                        <asp:HiddenField ID="hdnquestionId" runat="server"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <table class="tblOptions">
                                        <tr>
                                            <td>
                                                <asp:RadioButton ID="rdOption1" runat="server" Text='<%#Eval("Option1") %>' GroupName='
                                                    <%#Eval("QuestionId") %>' />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:RadioButton ID="rdOption2" runat="server" Text='<%#Eval("Option2") %>' GroupName='
                                                        <%#Eval("QuestionId") %>' />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <asp:RadioButton ID="rdOption3" runat="server" Text='<%#Eval("Option3") %>' GroupName='
                                                            <%#Eval("QuestionId") %>' />
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <asp:RadioButton ID="rdOption4" runat="server" Text='<%#Eval("Option4") %>' GroupName='
                                                                <%#Eval("QuestionId") %>' />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <asp:Label ID="lbquestionstatus" runat="server"></asp:Label>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="correctAnswer">Correct Answer Is -:

                                                                <asp:Label ID="lbAnswer" runat="server" Text='<%#Eval("QuestionAnswer") %>'>
                                                                </asp:Label>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

This code will generate the output like this,

 

Now how we will check while the user will click on submit button if any radio button is selected within a question or not? We have many ways to validate this, we can validate it on server side on button click or we can validate it on client side. I am here explaining on client side.

 

Css

<style>
     .border {
           border-color: red;
           border-width: 2px;
           border-style: solid;
           width: 100%;
      }
      
     
     .tblOptions {
         width: 100%;
      }
      </style>

Script

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
     <script> 
     function CheckIfAllQuestionAnswerHasBeenSubmitted() {
            var numItems = $('.tblOptions').length;
            var flagtocheckcount = 0;
            $(".tblOptions").each(function () {
            var groupname = $('input[type=radio]:first', this).attr('name');
            if (!$("input[name='" + groupname + "']:checked").val()) {
            $(this).parents(".tableclass").addClass("border");
            }
            else {
                  flagtocheckcount = flagtocheckcount + 1;
                }
          });
        }
     </script>

In the above mentioned Jquery code, we have done the validation for the image showing above. We created a small jquery function which we calling at the button click, and this function will check if any question answer option is not selected (radio button) then this function will add a class in outer table of that question, and class will highlight the border of that question, so that user can easliy understand that he or she don't selected the answer of that question.

If you see the jquery code you will see that we have done nothing extraordinary, we have a class(tbloptions) in outer table, which will be on every dynamic table that will generate in Gridview. We using a foreach loop on this class because we know this class will be there for each table, and then finding radio button withing that table which having this class, finding radio button with the type specifier of that element and getting the name of group from the first element of radio button.

And that's it when we have group name we can easily find out if any button is selected in the group or not.You can find complete code with in the code snippet, i have posted there with zip file.