locked
Single Choice Table Cell, and get the exact value in it's cell RRS feed

  • Question

  • User1228272764 posted

    Table Template Example

    Here is a table template design. Mine is much uglier. I don't have any idea how to make list item of radiobuttonlist inside the table, so I made by each cell have its own radio button. it's hard to make single choice radibuttonlist only.

    Here is the goal, I want to make 14 cells table with automatically arrange . each cell contains label/checkbox/radio button so it will have value when someone click / chose.

    every cell manually created, which means it's not dynamically generated by the server. I am the one who defined the cell of the table. here is mine : 

     <table align="center">
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB1" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB2" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB3" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB4" runat="server" /></div></td>
                </tr>
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB5" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB6" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB7" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB8" runat="server" /></div></td>
                </tr>
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB9" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB10" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB11" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB12" runat="server" /></div></td>
                </tr>
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RadioButton9" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RadioButton10" runat="server" /></div></td>
                </tr>
            </table>

    <asp:Button ID="BtngetData" runat="server" Text="GetDataCell" />

    how do I achieve this goal?

    Rule: when someone clicks the radiobuttonlist, so the value retrieved by the btnGetData. and all the radiobuttonlist must not choose multiple in this table of mine. 

    Tuesday, June 25, 2019 2:45 AM

Answers

  • User288213138 posted

    Hi tandasanyu,

    You can set RadioButton to Single Choice using jquery. And get the value inside the RadioButton through the button's click event.

    The code:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
        $(function () {
            $("#tab input[type=radio]").click(function () {
                if ($(this).is(":checked")) {
                    $("#tab input[type=radio]").removeAttr("checked");
                    $(this).attr("checked", "checked");
                }
            });
        });
    </script>
    <div>
                <table id="tab">
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB1" Text="R1" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB2" Text="R2" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB3" Text="R3" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB4" Text="R4" runat="server" /></div></td>
                </tr>
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB5" Text="R5" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB6" Text="R6" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB7" Text="R7" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB8" Text="R8" runat="server" /></div></td>
                </tr>
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB9" Text="R9" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB10" Text="R10" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB11" Text="R11" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB12" Text="R12" runat="server" /></div></td>
                </tr>
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RadioButton9" Text="R13" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RadioButton10" Text="R14" runat="server" /></div></td>
                </tr>
            </table>
    
            <asp:Button ID="BtngetData" runat="server" Text="GetDataCell" OnClick="BtngetData_Click" /><br />
                <asp:Label ID="Label1" runat="server" ></asp:Label>
            </div>
    
    Aspx.cs:
    protected void BtngetData_Click(object sender, EventArgs e)
            {
                if (RB1.Checked)
                {
                    Label1.Text = "You selected " + RB1.Text;
                }
                else if (RB2.Checked)
                {
                    Label1.Text = "You selected " + RB2.Text;
                }
                else if (RB3.Checked)
                {
                    Label1.Text = "You selected " + RB3.Text;
                }
                if (RB4.Checked)
                {
                    Label1.Text = "You selected " + RB4.Text;
                }
                else if (RB5.Checked)
                {
                    Label1.Text = "You selected " + RB5.Text;
                }
                else if (RB6.Checked)
                {
                    Label1.Text = "You selected " + RB6.Text;
                }
                if (RB7.Checked)
                {
                    Label1.Text = "You selected " + RB7.Text;
                }
                else if (RB8.Checked)
                {
                    Label1.Text = "You selected " + RB8.Text;
                }
                else if (RB9.Checked)
                {
                    Label1.Text = "You selected " + RB9.Text;
                }
                if (RB10.Checked)
                {
                    Label1.Text = "You selected " + RB10.Text;
                }
                else if (RB11.Checked)
                {
                    Label1.Text = "You selected " + RB11.Text;
                }
                else if (RB12.Checked)
                {
                    Label1.Text = "You selected " + RB12.Text;
                }
                else if (RadioButton9.Checked)
                {
                    Label1.Text = "You selected " + RadioButton9.Text;
                }
                else if (RadioButton10.Checked)
                {
                    Label1.Text = "You selected " + RadioButton10.Text;
                }
            }
    

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 10:04 AM

All replies

  • User288213138 posted

    Hi tandasanyu,

    You can set RadioButton to Single Choice using jquery. And get the value inside the RadioButton through the button's click event.

    The code:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
        $(function () {
            $("#tab input[type=radio]").click(function () {
                if ($(this).is(":checked")) {
                    $("#tab input[type=radio]").removeAttr("checked");
                    $(this).attr("checked", "checked");
                }
            });
        });
    </script>
    <div>
                <table id="tab">
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB1" Text="R1" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB2" Text="R2" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB3" Text="R3" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB4" Text="R4" runat="server" /></div></td>
                </tr>
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB5" Text="R5" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB6" Text="R6" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB7" Text="R7" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB8" Text="R8" runat="server" /></div></td>
                </tr>
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RB9" Text="R9" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB10" Text="R10" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB11" Text="R11" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RB12" Text="R12" runat="server" /></div></td>
                </tr>
                <tr>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed"><asp:RadioButton ID="RadioButton9" Text="R13" runat="server" /></div></td>
                    <td style="padding:10px"><div style="width:160px;height:160px;background-color:red;border-style:dashed""><asp:RadioButton ID="RadioButton10" Text="R14" runat="server" /></div></td>
                </tr>
            </table>
    
            <asp:Button ID="BtngetData" runat="server" Text="GetDataCell" OnClick="BtngetData_Click" /><br />
                <asp:Label ID="Label1" runat="server" ></asp:Label>
            </div>
    
    Aspx.cs:
    protected void BtngetData_Click(object sender, EventArgs e)
            {
                if (RB1.Checked)
                {
                    Label1.Text = "You selected " + RB1.Text;
                }
                else if (RB2.Checked)
                {
                    Label1.Text = "You selected " + RB2.Text;
                }
                else if (RB3.Checked)
                {
                    Label1.Text = "You selected " + RB3.Text;
                }
                if (RB4.Checked)
                {
                    Label1.Text = "You selected " + RB4.Text;
                }
                else if (RB5.Checked)
                {
                    Label1.Text = "You selected " + RB5.Text;
                }
                else if (RB6.Checked)
                {
                    Label1.Text = "You selected " + RB6.Text;
                }
                if (RB7.Checked)
                {
                    Label1.Text = "You selected " + RB7.Text;
                }
                else if (RB8.Checked)
                {
                    Label1.Text = "You selected " + RB8.Text;
                }
                else if (RB9.Checked)
                {
                    Label1.Text = "You selected " + RB9.Text;
                }
                if (RB10.Checked)
                {
                    Label1.Text = "You selected " + RB10.Text;
                }
                else if (RB11.Checked)
                {
                    Label1.Text = "You selected " + RB11.Text;
                }
                else if (RB12.Checked)
                {
                    Label1.Text = "You selected " + RB12.Text;
                }
                else if (RadioButton9.Checked)
                {
                    Label1.Text = "You selected " + RadioButton9.Text;
                }
                else if (RadioButton10.Checked)
                {
                    Label1.Text = "You selected " + RadioButton10.Text;
                }
            }
    

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 10:04 AM
  • User1228272764 posted

    thank you sam, its help me out. really.

    but I tried to modify the behaviour when button clicks than the javascript store the value on asp textbox & call click method for asp button. but it's not working. here is the sample code : 

    (function() {
        $('<%= qq1.ClientID %>').on('click', function(){
                
                 document.getElementById('<%= TxtValueByClick.ClientID %>').value = "David";
                 document.getElementById('<%= Button1.ClientID %>').click();
        });   
            $('<%= qq2.ClientID %>').on('click', function(){
               
                document.getElementById('<%= TxtValueByClick.ClientID %>').value = "Bowie";
                document.getElementById('<%= Button1.ClientID %>').click();
        }); 
    });

    QQ1 & QQ2 is my div id. its client side. only the button1 was asp button and TxtValueByClick was the asp textbox. can you help me out?

    Wednesday, June 26, 2019 7:41 AM
  • User288213138 posted

    Hi tandasanyu,

    I don't quite understand what you mean.

    tandasanyu

    $('<%= qq1.ClientID %>').on('click', function(){

    Is this line of code intended to trigger the div click event?

    If so, the id in the jquery selector should be preceded by a #.

    $('#<%= qq1.ClientID %>').on('click', function () {

    tandasanyu

     document.getElementById('<%= Button1.ClientID %>').click();

    I don't understand what you mean by this line of code.

    What's the point of adding a click event to div and then a click event to button?

    You can refer to this link for some jQuery basics:https://www.w3schools.com/js/js_jquery_selectors.asp

    Best regards,

    Sam

    Friday, June 28, 2019 10:36 AM