This is a migrated thread and some comments may be shown as answers.

Radio functionality not working

5 Answers 523 Views
Button
This is a migrated thread and some comments may be shown as answers.
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Fit2Page asked on 08 Jun 2020, 12:03 PM

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

5 Answers, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 11 Jun 2020, 07:53 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 11 Jun 2020, 11:03 AM

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

0
Peter Milchev
Telerik team
answered on 11 Jun 2020, 11:15 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 12 Jun 2020, 06:29 AM

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

0
Accepted
Peter Milchev
Telerik team
answered on 16 Jun 2020, 01:50 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Button
Asked by
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Peter Milchev
Telerik team
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or