[Solved] Working with RadioButtons within RadGrid

[Chad Johnson]

Greetings,

I am currently working on a grid that has a set of Radio Buttons within it, but I'm having issues trying to keep them from being selected one at a time.  Here is the grid code.

<telerik:RadGrid ID="rgdKnowledgeOwners" runat="server" AllowSorting="true" AutoGenerateColumns="false"
                    AllowPaging="true" GridLines="None" AllowMultiRowSelection="true" PageSize="25" Width="500px"
                    OnItemDataBound="rgdKnowledgeOwners_ItemDataBound">
                    <PagerStyle Mode="NextPrevNumericAndAdvanced" Position="TopAndBottom" />
                    <HeaderContextMenu>
                        <CollapseAnimation Type="OutQuint" Duration="200" />
                    </HeaderContextMenu>
                    <MasterTableView DataKeyNames="POCID" AutoGenerateColumns="false">
                        <RowIndicatorColumn>
                            <HeaderStyle Width="20px" />
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn>
                            <HeaderStyle Width="20px" />
                        </ExpandCollapseColumn>
                        <Columns>
                            <telerik:GridBoundColumn DataField="POCID"
                                HeaderText="POCID" UniqueName="POCID" Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="Primary Owner" SortExpression="PrimaryOwner">
                                <ItemTemplate>
                                    <asp:RadioButton id="rbPrimaryOwner" runat="server" GroupName="PrimaryOwner">
                                    </asp:RadioButton>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="Name"
                                HeaderText="Knowledge Owner Name" UniqueName="Name" SortExpression="Name">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="Receive Admin Emails" SortExpression="ReceiveEmail">
                                <ItemTemplate>
                                    <asp:CheckBox id="chkReceiveEmail" runat="server">
                                    </asp:CheckBox>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Disply on CoP" SortExpression="DisplayOnCoP">
                                <ItemTemplate>
                                    <asp:CheckBox id="chkDisplayOnCoP" runat="server">
                                    </asp:CheckBox>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings AllowRowsDragDrop="true" AllowColumnsReorder="false"
                        AllowDragToGroup="true" AllowRowHide="true" AllowColumnHide="true"
                        ReorderColumnsOnClient="true">
                        <Selecting AllowRowSelect="true" />
                    </ClientSettings>
                    <FilterMenu>
                        <CollapseAnimation Type="OutQuint" Duration="200" />
                    </FilterMenu>
                </telerik:RadGrid>

The column that uses the Radio Buttons is Primary Owner.  I've been trying to use Javascript to keep only one button at a time selected, but have been unsuccessful.  Here is the code for that.

protected void rgdKnowledgeOwners_ItemDataBound(object sender, GridItemEventArgs e)
        {
            GridItemType giType = e.Item.ItemType;
            if (giType == GridItemType.AlternatingItem || giType == GridItemType.Item)
            {
                DTOOwner dr = (DTOOwner)e.Item.DataItem;
                RadioButton rb = (RadioButton) e.Item.FindControl("rbPrimaryOwner");
                CheckBox chk1 = (CheckBox)e.Item.FindControl("chkReceiveEmail");
                CheckBox chk2 = (CheckBox)e.Item.FindControl("chkDisplayOnCoP");

                //Set radio buttons to script so that if one is selected, others are turned false
                string script = "SetUniqueRadioButton(" + rb.ClientID + ", " +  "'rgdKnowledgeOwners')";
                rb.Attributes.Add("onclick", script);

                rb.Checked = dr.PrimaryOwner;
                chk1.Checked = dr.ReceiveEmail;
                chk2.Checked = dr.DisplayOnCoP;
            }
        }

And here is the javascript.

function SetUniqueRadioButton(objRadioButton, grdName) {
            var i, obj;
            for (i = 0; i < document.all.length; i++) {
                obj = document.all(i);

                if (obj.type == "radio") {
                    if ((objRadioButton.id.substr(0, grdName.length) == grdName)) {
                        if (objRadioButton.id == obj.id)
                            obj.checked = true;
                        else
                            obj.checked = false;
                    }
                }
            }
        }

If anyone has any ideas on how to correct this issue, I'd appreciate it.  Thanks.

~Chad Johnson

[Princy]

Hello Chad Johnson,

Did you check out this scenario with different browsers? The javascript you use, I suppose, is not cross-browser compatible, so probably you can slightly modify it to ensure that the logic will work fine under Opera and FireFox browsers as shown below:
js:

    <script language="javascript" type="text/javascript">
    function SelectMeOnly(objRadioButton, grdName)
    {
      var i, obj, pageElements;

      if(navigator.userAgent.indexOf("MSIE")!= -1)
      {
        //IE browser
        pageElements = document.all;
      }
      else if(navigator.userAgent.indexOf("Mozilla") != -1 || navigator.userAgent.indexOf("Opera")!= -1)
      {
        //FireFox/Opera browser
        pageElements = document.documentElement.getElementsByTagName("input");
      }
      for (i=0; i < pageElements.length; i++)
      {
        obj = pageElements[i];

        if (obj.type == "radio")
        {
         if (objRadioButton.id.substr(0, grdName.length) == grdName)
         {
           if (objRadioButton.id == obj.id)
           {
             obj.checked = true;
           }
           else
           {
             obj.checked = false;
           }
         }
        }
      }
    }
    </script>

Thanks
Princy.

[Chad Johnson]

We only develop for IE at the company I work for, so that's not an issue.