How to find room id in gridivew with javascript

Question

User1487175000 posted

Hi,

I have gridview of available room, i have radio button in gridview to mark main room.

I need to know when user click on this radio button what is the main room id. So that in javaScript with room id i send Get post in jquery to fetch more room information and show in popup.

following javaScript i use when user click on checkbox, to unchecked the previous radio button

        function CheckOnOff(rdoId, gridName) {
            var rdo = document.getElementById(rdoId);
            /* Getting an array of all the "INPUT" controls on the form.*/
            var all = document.getElementsByTagName("input");
            for (i = 0; i < all.length; i++) {
                /*Checking if it is a radio button, and also checking if the
                id of that radio button is different than "rdoId" */
                if (all[i].type == "radio" && all[i].id != rdo.id) {
                    var count = all[i].id.indexOf(gridName);
                    if (count != -1) {
                        all[i].checked = false;
                    }
                }
            }
            rdo.checked = true; /* Finally making the clicked radio button CHECKED */
        }

ASPX:

                            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
                                Width="100%" CssClass="mGrid" OnDataBound="GridView1_DataBound" OnRowDataBound="GridView1_RowDataBound">
                                <Columns>
                                    <asp:TemplateField Visible="False">
                                        <ItemTemplate>
                                            <asp:Label ID="ID" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
                                        </ItemTemplate>
                                        <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                                        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:CheckBox ID="RumID" runat="server" />
                                        </ItemTemplate>
                                        <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                                        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Rum">
                                        <ItemTemplate>
                                            <asp:Label ID="RumNamn" runat="server" Text='<%# Bind("Benaming") %>' Width="100%"></asp:Label>
                                        </ItemTemplate>
                                        <ControlStyle Width="100%" />
                                        <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                                        <ItemStyle Width="30%" HorizontalAlign="Left" VerticalAlign="Top" />
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Sittning">
                                        <ItemTemplate>
                                            <asp:DropDownList ID="ddRoomSitting" runat="server" Width="100%">
                                                <asp:ListItem Value="Mob">Möblering</asp:ListItem>
                                                <asp:ListItem Value="Bio">Biosittning</asp:ListItem>
                                                <asp:ListItem Value="U">U-sittning</asp:ListItem>
                                                <asp:ListItem Value="Cabaret">Cabaretsittning</asp:ListItem>
                                                <asp:ListItem Value="Styrelse">Styrelsesittning</asp:ListItem>
                                                <asp:ListItem Value="Skol">Skolsittning</asp:ListItem>
                                                <asp:ListItem Value="Se nedan">Se nedan</asp:ListItem>
                                                <asp:ListItem Value="Mingle">Mingel/Lounge</asp:ListItem>
                                            </asp:DropDownList>
                                        </ItemTemplate>
                                        <ControlStyle Width="100%" />
                                        <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                                        <ItemStyle Width="25%" HorizontalAlign="Left" VerticalAlign="Top" />
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Huvud">
                                        <ItemTemplate>
                                            <asp:RadioButton ID="rdobutton" name="mainRoom" runat="server" OnClick="javascript:CheckOnOff(this.id,'GridView1');" />
                                        </ItemTemplate>
                                        <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                                        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />
                                        <ItemStyle Width="5%" />
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Antal. pers">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtAntal" runat="server" Width="97%" MaxLength="2"></asp:TextBox>
                                            <asp:FilteredTextBoxExtender ID="txtAntal_FilteredTextBoxExtender" runat="server"
                                                TargetControlID="txtAntal" ValidChars="1234567890">
                                            </asp:FilteredTextBoxExtender>
                                        </ItemTemplate>
                                        <ControlStyle Width="100%" />
                                        <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                                        <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Fritext">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtRumFriText" runat="server" Width="97%"></asp:TextBox>
                                        </ItemTemplate>
                                        <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                                        <ItemStyle Width="30%" HorizontalAlign="Left" VerticalAlign="Top" />
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>

Answer 1

User475983607 posted

Bind the ID to the the Radio button's value attribute.  Then wire a click handler to the radio button and retrieve the ID from "this".

Answer 2

User61956409 posted

Hi Majeed,

It seems that you’d like to find data (room id) from current row when user click the radio button and you want to uncheck radio buttons when user click a checkbox. The following sample will be helpful, please refer to it.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:RadioButton ID="rdobutton" runat="server" name="mainRoom" OnClick="javascript:CheckOnOff(this);" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="RumID" runat="server" onchange="uncheckotherrdb(this);" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="lblrid" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

function CheckOnOff(obj) {
    var rid = $(obj).parent().parent().parent().find("[id*='lblrid']").text();
    alert(rid);
}

function uncheckotherrdb(obj) {
    var rid = $(obj).parent().parent().siblings().find("[type='radio']").attr('checked', false);
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ID");

        dt.Rows.Add("r001");
        dt.Rows.Add("r002");
        dt.Rows.Add("r003");

        GridView1.DataSource = dt;
        GridView1.DataBind();

    }
}

Best Regards,

Fei Han