Radio functionality not working

6 posts, 1 answers
  1. Fit2Page
    Fit2Page avatar
    458 posts
    Member since:
    Feb 2007

    Posted 08 Jun 2020 Link to this post

    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

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    880 posts

    Posted 11 Jun 2020 Link to this post

    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.
  3. Fit2Page
    Fit2Page avatar
    458 posts
    Member since:
    Feb 2007

    Posted 11 Jun 2020 in reply to Peter Milchev Link to this post

    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

  4. Peter Milchev
    Admin
    Peter Milchev avatar
    880 posts

    Posted 11 Jun 2020 Link to this post

    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.
  5. Fit2Page
    Fit2Page avatar
    458 posts
    Member since:
    Feb 2007

    Posted 12 Jun 2020 in reply to Peter Milchev Link to this post

    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

  6. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    880 posts

    Posted 16 Jun 2020 Link to this post

    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.
Back to Top