Workaround for RadButton in Radio Button mode inside a template?

4 posts, 0 answers
  1. Frank
    Frank avatar
    10 posts
    Member since:
    Oct 2011

    Posted 09 Nov 2011 Link to this post

    ASP.net has had a bug with the RadioButton controls running inside of templates since 1.0. I wanted to use the RadButton as a replacement for the standard RadioButton. I have multiple Radbuttons (in Radio mode) being built by a RadListView. When the result is rendered, I get radio buttons that don't participate as if in a Group ( You can select all the radio buttons ).

    Same thing happens to ASP.net RadioButtons. In the past I've hacked around this with custom RadioButton classes that handle outputting the propert ID to the client with respect the GroupName property. Also, I've done the client side javascript hack.

    This is such a common hack in ASP.net I was hoping the Telerik RadButton would just work in this situation. 

    Here's an example of me using the Radbutton in a template:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CheckListInputGroupView.ascx.cs" Inherits="ProjectCold.RadTest.WebApplication.Views.CheckListInputGroupView" %>
    <%@ Import Namespace="ProjectCold.RadTest.WebApplication.Model" %>
    <%@ Import Namespace="Telerik.Web.UI" %>
     
    <telerik:RadListView ID="RadListView" runat="server"
        DataSource='<%#Bind("GroupItems")%>'
        ItemPlaceholderID="GroupItemsHolder"
        DataKeyNames="GroupItemID">
        <LayoutTemplate>
            <fieldset title='<%#Eval("ToolTip")%>'>
                <legend><%#Eval("Caption")%></legend>
                <asp:Panel ID="GroupItemsHolder" runat="server" />
            </fieldset>
        </LayoutTemplate>
        <ItemTemplate>
            <telerik:RadButton
                runat="server"
                GroupName='<%#Eval("FK_CheckListInputID", "InputGroup{0}")%>'
                Text='<%#Eval("Text")%>'
                ButtonType="ToggleButton"
                ToggleType='<%# ( (CheckListInputGroup.InputGroupTypes)Eval("CheckListInputGroup.InputGroupType") == CheckListInputGroup.InputGroupTypes.Radio ? ButtonToggleType.Radio : ButtonToggleType.CheckBox) %>'
                 />
        </ItemTemplate>
        <ItemSeparatorTemplate>
            <br />
        </ItemSeparatorTemplate>
    </telerik:RadListView>

    What's the best way to get my RadButton's to act like proper RadioButton's (mutually exclusive selection)?

    Also, this is .Net 4, so I have access to the new ClientIDMode. I tried switching it to static, and using a static ID, but it caused a JSON error later when i click on a button.

  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 10 Nov 2011 Link to this post

    Hello Frank,

    I don't see any problem with your code. Have you tried inspecting what the HTML output is for your page and see if the groupname value is set correctly on the radio buttons? You can use the IE Developer Tool to inpsect your html.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Frank
    Frank avatar
    10 posts
    Member since:
    Oct 2011

    Posted 10 Nov 2011 Link to this post

    Kevin,
    Thanks for the response. However, GroupName is not part of the HTML INPUT spec. I wouldn't expect to see it in the HTML source, nor do I. HTML INPUT's in Radio mode use their "Name" attribute to designate a 'group' of them. This is why it fails when inside of a data-bound container ( ASP.NET alters the NAME to include a unique per-template ID ).

    In the case of a RadButton, it appears that Telerik is passing GroupName client side in JSON. They actually use two proprties. One is "groupName" the other is "uniqueGroupName" The problem is, "uniqueGroupName" is being formed incorrectly, it containers the naming container ID of the template item in the ListView. 

    Here's a link to a demo project.

    Here's the JSON that shows the issues (RadButton[1 to 5] are not inside a databound container. The next 5 are in a RadListView. Notice the uniqueGroupName ans how it's broken by the ID of the RadListView.

    <script type="text/javascript">
    //<![CDATA[
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadButton, {"_postBackReference":"__doPostBack('RadButton1','')","buttonType":2,"clientStateFieldID":"RadButton1_ClientState","groupName":"Set1","iconData":{},"imageData":{},"text":"Button 1 - Group 1","toggleStatesData":[],"toggleType":2,"uniqueGroupName":"Set1","uniqueID":"RadButton1"}, null, null, $get("RadButton1"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadButton, {"_postBackReference":"__doPostBack('RadButton2','')","buttonType":2,"clientStateFieldID":"RadButton2_ClientState","groupName":"Set1","iconData":{},"imageData":{},"text":"Button 2 - Group 1","toggleStatesData":[],"toggleType":2,"uniqueGroupName":"Set1","uniqueID":"RadButton2"}, null, null, $get("RadButton2"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadButton, {"_postBackReference":"__doPostBack('RadButton3','')","buttonType":2,"clientStateFieldID":"RadButton3_ClientState","groupName":"Set1","iconData":{},"imageData":{},"text":"Button 3 - Group 1","toggleStatesData":[],"toggleType":2,"uniqueGroupName":"Set1","uniqueID":"RadButton3"}, null, null, $get("RadButton3"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadButton, {"_postBackReference":"__doPostBack('RadButton4','')","buttonType":2,"clientStateFieldID":"RadButton4_ClientState","groupName":"Set2","iconData":{},"imageData":{},"text":"Button 1 - Group 2","toggleStatesData":[],"toggleType":2,"uniqueGroupName":"Set2","uniqueID":"RadButton4"}, null, null, $get("RadButton4"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadButton, {"_postBackReference":"__doPostBack('RadButton5','')","buttonType":2,"clientStateFieldID":"RadButton5_ClientState","groupName":"Set2","iconData":{},"imageData":{},"text":"Button 1 - Group 2","toggleStatesData":[],"toggleType":2,"uniqueGroupName":"Set2","uniqueID":"RadButton5"}, null, null, $get("RadButton5"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadButton, {"_postBackReference":"__doPostBack('RadListView1$ctrl0$RadButton1','')","buttonType":2,"clientStateFieldID":"RadListView1_ctrl0_RadButton1_ClientState","groupName":"ROUND_THINGS","iconData":{},"imageData":{},"text":"Item 0 - Group: round_things","toggleStatesData":[],"toggleType":2,"uniqueGroupName":"RadListView1$ctrl0$ROUND_THINGS","uniqueID":"RadListView1$ctrl0$RadButton1"}, null, null, $get("RadListView1_ctrl0_RadButton1"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadButton, {"_postBackReference":"__doPostBack('RadListView1$ctrl2$RadButton1','')","buttonType":2,"clientStateFieldID":"RadListView1_ctrl2_RadButton1_ClientState","groupName":"ROUND_THINGS","iconData":{},"imageData":{},"text":"Item 1 - Group: round_things","toggleStatesData":[],"toggleType":2,"uniqueGroupName":"RadListView1$ctrl2$ROUND_THINGS","uniqueID":"RadListView1$ctrl2$RadButton1"}, null, null, $get("RadListView1_ctrl2_RadButton1"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadButton, {"_postBackReference":"__doPostBack('RadListView1$ctrl4$RadButton1','')","buttonType":2,"clientStateFieldID":"RadListView1_ctrl4_RadButton1_ClientState","groupName":"ROUND_THINGS","iconData":{},"imageData":{},"text":"Item 2 - Group: round_things","toggleStatesData":[],"toggleType":2,"uniqueGroupName":"RadListView1$ctrl4$ROUND_THINGS","uniqueID":"RadListView1$ctrl4$RadButton1"}, null, null, $get("RadListView1_ctrl4_RadButton1"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadButton, {"_postBackReference":"__doPostBack('RadListView1$ctrl6$RadButton1','')","buttonType":2,"clientStateFieldID":"RadListView1_ctrl6_RadButton1_ClientState","groupName":"SQUARE_THINGS","iconData":{},"imageData":{},"text":"Item 3 - Group: square_things","toggleStatesData":[],"toggleType":2,"uniqueGroupName":"RadListView1$ctrl6$SQUARE_THINGS","uniqueID":"RadListView1$ctrl6$RadButton1"}, null, null, $get("RadListView1_ctrl6_RadButton1"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadButton, {"_postBackReference":"__doPostBack('RadListView1$ctrl8$RadButton1','')","buttonType":2,"clientStateFieldID":"RadListView1_ctrl8_RadButton1_ClientState","groupName":"SQUARE_THINGS","iconData":{},"imageData":{},"text":"Item 4 - Group: square_things","toggleStatesData":[],"toggleType":2,"uniqueGroupName":"RadListView1$ctrl8$SQUARE_THINGS","uniqueID":"RadListView1$ctrl8$RadButton1"}, null, null, $get("RadListView1_ctrl8_RadButton1"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadListView, {"Skin":"Default","UniqueID":"RadListView1","_clientSettings":{},"_currentPageIndex":0,"_isItemInserted":false,"_pageCount":1,"_pageSize":10,"clientStateFieldID":"RadListView1_ClientState"}, null, null, $get("RadListView1"));
    });
    //]]>
    </script>


  5. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 11 Nov 2011 Link to this post

    Hello Frank,

    I found this article on how to use RadioButtons in a grid.

    http://www.asp.net/data-access/tutorials/adding-a-gridview-column-of-radio-buttons-vb

    It looks like the only way to implement what you want to achieve is through standard html syntax or JS. For JS, you could handle the OnClientLoad event of the RadButton and update the group name and see if it works then.

    I hope that helps.
Back to Top