RadCombobox with checkboxes and RadButton in itemtemplate issue

[Fit2Page]

Hi,

 

I have a RadCombobox like this:

 

        <telerik:RadComboBox CheckBoxes="true" ID="rcb_team" DataSourceID="sds_team" DataValueField="id" DataTextField="naam" runat="server">
            <HeaderTemplate>
                <label class="mr-3">&nbsp;</label>
                 <div class="row">
                        <div class="col-6">Naam</div>
                     <div class="col-6">Functie</div>
                </div>
            </HeaderTemplate>
            <ItemTemplate>
                 <div class="row">
                        <div class="col-6"><%# Eval("naam") %></div>
                  <div class="col-2">
                      <telerik:RadButton ID="rb_teamleider" AutoPostBack="false" ToggleType="Radio" ButtonType="ToggleButton" GroupName="Radios" runat="server">
                            <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
                </div>
            </ItemTemplate>
        </telerik:RadComboBox>

 

In this scenario the radio buttons are not toggling...can you please reproduce and see what is happening?

 

Thanks,

Marc

[Attila Antal]

Hello Marc,

RadButton Radio groups will only work next to each other. If you place them in different Server Templates, they would not group up to work together.

Nevertheless, if you want to make them work in sync, you will need to implement that additionally using JavaScript.

Subscribe the RadButton to its OnClientCheckedChanged event

<telerik:RadButton ID="rb_teamleider" AutoPostBack="false" ToggleType="Radio" ButtonType="ToggleButton" GroupName="Radios" runat="server" OnClientCheckedChanged="OnClientCheckedChanged">

 

Upon checking a RadButton Radio the event triggers. Within this event use JavaScript/jQuery to find all the other RadButtons within the ComboBox dropdown and uncheck them.

<script>
    function OnClientCheckedChanged(sender, args) {
        if (args.get_checked()) {
            var $otherRadioButtons = $(sender.get_element()).closest('.rcbList').find('.rcbItem .RadButton.rbRadioButton:not(#' + sender.get_id() + ')');

            $otherRadioButtons.each(function (index, btnElement) {
                if (btnElement.control) {
                    var radButton = btnElement.control;
                    radButton.set_checked(false);
                }
            })
        }
    }
</script>

 

This way no more than one button will be checked at the same time.

 

Regards,
Attila Antal
Progress Telerik

[Fit2Page]

Yeah Attila,

 

This works like a charm...thank you!

 

Marc