Radio functionality not working

[Fit2Page]

Hi,

 

I can't get the buttons to work with toggletype Radio when I generate them in a repeater list.

Buttons are the same as from your demo,

Please see for example here: http://eschpla.ontwikkelruimte.nl/nl/schoenen/ballerinas/blauw/lolo-capri-ballerina-donkerblauw-suede-3341

Upper list is from repeater, second from your demo.

Any clue why the first set isn't working properly?

 

Thanks,

Marc

[Peter Milchev]

Hello Marc,

I am afraid that the link is pointing to a broken website at the time of writing. It has the following error:

[IndexOutOfRangeException: Index 0 is either negative or above rows count.]
   System.Data.DataView.GetRow(Int32 index) +2147855

Meanwhile, you can check the Example 2: Toggling checked state by using class name where the CSS class assigned to the radio buttons acts as a group identifier:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/radiobuttonlist/functionality/standalone-radiobutton#advanced-usage

• <telerik:RadRadioButton runat="server" ID="MaleRadioButton" CssClass="GenderRadioButton"
      AutoPostBack="false" Value="male" Text="Male"  OnClientClicked="toggleRadios">
  </telerik:RadRadioButton>
  
  <telerik:RadRadioButton runat="server" ID="FemaleRadioButton" CssClass="GenderRadioButton"
      AutoPostBack="false" Value="female" Text="Female" OnClientClicked="toggleRadios">
  </telerik:RadRadioButton>
  
  <script>
      function toggleRadios(sender, args) {
          var radioButtons = $telerik.$(".GenderRadioButton");
  
          radioButtons.each(function (index, element) {
              var radioButton = element.control;
  
              if (radioButton !== sender) {
                  radioButton.set_checked(false);
              }
          });
      }
  </script>

 

If the issue persists, please share the markup of the working and non-working declaration of the buttons and the repeater.

Regards,
Peter Milchev
Progress Telerik

[Fit2Page]

Hi Peter,

 

Please use the link http://eschpla.ontwikkelruimte.nl/xmlproductdetails.aspx?id=3341&g=61

 

For the example.

Mind that I refer to radbuttons not radradiobuttonlist.

 

Marc

[Peter Milchev]

Thank you Marc,

The issue is that the uniqueGroupName is different for the buttons in the repeater while it is the same for the buttons in our demo.

This group is used as a way to determine which radio buttons are in a given group and should be unchecked once a button is checked.

If the issue persists, please share the markup of the buttons and the repeater.

Regards,
Peter Milchev
Progress Telerik

[Fit2Page]

Hi Peter,

I discovered the uniqueGroupname in the source and see that the clientid is used as a prefix for that.

How can I make the uniqueGroupname the same for all items in the repeater to get this working:

 

  <asp:Repeater ID="rep_Sizes" DataSourceID="sds_rcb_maat" runat="server">
            <ItemTemplate>
<telerik:RadButton ID="btnToggle" RenderMode="Lightweight" Width="50" Skin="Silk" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="StandardButton" AutoPostBack="false">
    <ToggleStates>
                      <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-radio-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-radio"></telerik:RadButtonToggleState>

    </ToggleStates>
</telerik:RadButton>
            </ItemTemplate>
        </asp:Repeater>

Regards, Marc

[Peter Milchev]

Hello Marc,

Thank you for the markup, I was able to replicate the issue and investigate it more deeply. 

It turns out the way the unique IDs are formed leads to different UniqueGroupNames. Here is how the UniqueGroupName is formed:

private string _uniqueGroupName;
		/// <exclude/> 
		/// <excludetoc/>
		[ClientControlProperty]
		[ClientPropertyName("uniqueGroupName")]
		protected virtual string UniqueGroupName
		{
			get
			{
				if (this._uniqueGroupName == null)
				{
					string groupName = this.GroupName;
					string uniqueID = this.UniqueID;
					if (uniqueID != null)
					{
						int length = uniqueID.LastIndexOf(base.IdSeparator);
						if (length >= 0 && groupName.Length > 0)
						{
							groupName = uniqueID.Substring(0, length + 1) + groupName;
						}
					}
					this._uniqueGroupName = groupName;
				}
				return this._uniqueGroupName;
			}
		}

This can be easily overcome by registering the following script after the ScriptManager. Keep in mind that this will force all buttons to use the group name instead of a unique name.

<script>
    Telerik.Web.UI.RadButton.prototype.get_uniqueGroupName = function () {
        return this._groupName;
    }
</script>

Regards,
Peter Milchev
Progress Telerik