I have 4 asp radio buttons that I want to appear like toggle buttons, but still function as asp radio buttons. Mainly, I need the CheckedChanged event to fire when the button is clicked. Currently, this is what I have for the HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="stylesheet"/>
<div class="col-xs-10 btn-group colors" data-toggle="buttons">
<div class="row">
<div id="tbl_rdo_ach" runat="server" class="col-xs-2">
<label class="btn btn-primary">
ACH/E-Check
<asp:RadioButton ID="rdo_ach" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
AutoPostBack="True" Text="ACH/E-Check" CssClass="radioButton"></asp:RadioButton>
</label>
</div>
<div id="tbl_rdo_cc" runat="server" class="col-xs-2">
<label class="btn btn-primary">
Debit/Credit Card
<asp:RadioButton ID="rdo_cc" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
AutoPostBack="True" Text="Debit/Credit Card" CssClass="radioButton"></asp:RadioButton>
</label>
</div>
<div id="tbl_rdo_ck" runat="server" class="col-xs-2">
<label class="btn btn-primary">
Check
<asp:RadioButton ID="rdo_ck" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
AutoPostBack="True" Text="Check"></asp:RadioButton>
</label>
</div>
<div id="tbl_rdo_et" runat="server" class="col-xs-2">
<label class="btn btn-primary">
EFT
<asp:RadioButton ID="rdo_et" Font-Bold="True" GroupName="rdo_pay_type" AutoPostBack="True"
Text="EFT Deposit" runat="server"></asp:RadioButton>
</label>
</div>
</div>
</div>The radioButton CSS class:
<style type="text/css">
.radioButton {
display:none;
}
</style>
The issue I am currently having is when I do not have the radioButton css class on the asp:RadioButtons, the radio button shows through the button group and you have to click specifically within the radio to get the CheckedChanged event to fire. When I do have the class on the radio buttons, the radio button does not display through the button group, but when I click the button, the CheckedChanged event won’t fire at all.
I also attempted using asp:Button instead of asp:RadioButton and then setting the necessary checked property so that the code behind runs properly, but due to the update panel on the master page, I can’t get a full postback to run.
Is there any way to get a button group to display, but have a full postback run when one of the buttons is clicked?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
I figured it out. The issue is the javascript that handles the toggle buttons doesn’t allow the postback to fire. Since I didn’t want to change the functionality of all toggle buttons, I changed data-toggle="buttons" to data-toggle="buttons-postback" and modified the Button.prototype.toggle function in bootstrap.js to this:
Button.prototype.toggle = function () {
var changed = true
var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent.length) {
var $input = this.$element.find('input')
if ($input.prop('type') == 'radio') {
if ($input.prop('checked')) changed = false
$parent.find('.active').removeClass('active')
this.$element.addClass('active')
} else if ($input.prop('type') == 'checkbox') {
if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false
this.$element.toggleClass('active')
}
$input.prop('checked', this.$element.hasClass('active'))
if (changed) $input.trigger('change')
} else {
var $parent = this.$element.closest('[data-toggle="buttons-postback"]')
if ($parent.length) {
var $input = this.$element.find('input')
if ($input.prop('type') == 'radio') {
if ($input.prop('checked')) changed = false
$parent.find('.active').removeClass('active')
this.$element.addClass('active')
} else if ($input.prop('type') == 'checkbox') {
if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false
this.$element.toggleClass('active')
}
$input.prop('checked', this.$element.hasClass('active'))
if (changed) $input.trigger('change')
__doPostBack($input.id, '')
} else {
this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
this.$element.toggleClass('active')
}
}
}
The part that I added is almost an exact copy of the function, but adds __doPostBack($input.id, '') at the end of the processing when it finds a parent with data-toggle="buttons-postback"
Since the postback resets the HTML to its original state, I also added this to the event handlers in my code behind:
ach_lbl.Attributes.Add("Class", "btn btn-primary active")
If tbl_rdo_cc.Visible Then
cc_lbl.Attributes.Add("Class", "btn btn-primary")
End If
If tbl_rdo_ck.Visible Then
ck_lbl.Attributes.Add("Class", "btn btn-primary")
End If
If tbl_rdo_et.Visible Then
et_lbl.Attributes.Add("Class", "btn btn-primary")
End If
I know this probably isn’t the most elegant solution (due to the fact I barely understand the JavaScript I modified), so any suggestions on what I can remove from what I added to the Button.prototype.toggle function would be greatly appreciated.
Method 2
I solved problem with another method:
- Remove
data-toggle="buttons" - Handle toggle by asp
<% %>tags inside HTML tags
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0