how to add jquery change event to radio buttons inside a grid - asp.net-mvc

Question

I have two radio buttons - Approve and Deny in Telerik MVC grid, also applied jquery buttonset() on them. I needcheck which radio button is selected on each row. tried to do that on jquery change event but it's not firing up. Any thought?
<div id="ApprovalDetail" class="content">
<%
//To make columns visible/invisible
string Actions = (string)ViewData["Actions"];
//To store data back in Model
for (int i = 0; i < Model.idrequest.Length; i++)
{
%>
<%=Html.HiddenFor(model => model.idrequest[i].RequestDetailsId, new {#id="hiddenRequestDetailsId"+i.ToString()} )%>
<%=Html.HiddenFor(model => model.idrequest[i].Approved, new {#id="hiddenApproved"+i.ToString()} )%>
<%
}
Html.Telerik().Grid(Model.idrequest)
.Name("IdRequest")
.DataKeys(dataKeys =>
{
dataKeys.Add(r => r.RequestDetailsId).RouteKey("RequestDetailsId");
}
)
.Columns(columns =>
{
columns.Bound(r => r.RequestDetailsId);
columns.Bound(r => r.EmpId);
columns.Bound(r => r.Name);
columns.Bound(r => r.Email);
columns.Bound(r => r.ADSId);
columns.Bound(r => r.Action);
columns.Bound(r => r.Role);
if (Actions != null)
{
if (Actions.Contains("Suspend"))
{
columns.Bound(r => r.SuspensionDate).Format("{0:MM/dd/yyyy}").Width(100);
columns.Bound(r => r.SuspensionReason);
}
if (Actions.Contains("Reactivate"))
columns.Bound(r => r.ReactivationDate).Format("{0:MM/dd/yyyy}").Width(100);
if (Actions.Contains("Delegate"))
{
columns.Bound(r => r.DelegateOwner);
columns.Bound(r => r.DelegationStartDate).Format("{0:MM/dd/yyyy}").Width(100);
columns.Bound(r => r.DelegationEndDate).Format("{0:MM/dd/yyyy}").Width(100);
}
}
columns.Template(r =>
{
%>
<div class="radioStyle">
<%= Html.RadioButton(r.RequestDetailsId.ToString(), 1, false, new { #id = "yes_Approve" + r.RequestDetailsId.ToString(), #group = "Approval" })%><label
for="yes_Approve<%= r.RequestDetailsId %>">Approve</label>
<%= Html.RadioButton(r.RequestDetailsId.ToString(), 2, false, new { #id = "no_Approve" + r.RequestDetailsId.ToString(), #group = "Approval" })%><label
for="no_Approve<%= r.RequestDetailsId %>">Deny</label>
</div>
<%
}).Title("Approve");
})
.Pageable(paging => paging.Enabled(true).PageSize(10))
.KeyboardNavigation()
.Filterable(filtering => filtering.Enabled(true))
.Sortable(sorting => sorting.Enabled(true))
.Groupable(grouping => grouping.Enabled(true))
.Resizable(resizing => resizing.Columns(true))
.Render();
%>
</div>
<script type="text/javascript">
$(document).ready(function () {
//visuals
$(function () {
$("#approveRequest").button();
$(".radioStyle").buttonset();
});
$('#IdRequest :radio[group=Approval]').each(function () {
$(this).change(function () { alert("aa"); });
});
</script>

Answer 1

Grid is binding after onDocumentReady. So you need to use special telerik grid event OnRowBound.
Use .ClientEvents(c=>c.OnRowBound("bindGridRow"))
Where bindGridRow your function that bind onchange event to radio button in single row.

Answer 2

You can use grid's OnLoad event to bind change event handler:
.ClientEvents(events => events.OnLoad("BindOnChange"))
function BindOnChange(e){
// this - IdRequest
$(this).change(OnRadio_Change);
}
function OnRadio_Change(e){
var $radio = $(e.target);
alert($radion.is(':checked'));
// var $tr = $(this).closest('tr');
}

Answer 3

used this jquery code -
<script type="text/javascript">
$(document).ready(function () {
//visuals
$(function () {
$("#approveRequest").button();
$(".radioStyle").buttonset();
});
$('.label-class').click(LabelClicked);
function LabelClicked() {
var input = $('#' + $(this).attr('for'));
if (input) {
var selected = input.val();
InputChanged(selected);
}
return true;
}
function InputChanged(selected) {
var val = (selected.toString().split('_'))[0];
var detailsId = (selected.toString().split('_'))[1];
var approval = false;
if (val == "yesApprove")
approval = true;
var count = $("#Count").val();
for (var i = 0; i < count; i++) {
if ($("#hiddenRequestDetailsId" + i).val() == detailsId) {
$("#hiddenApproved" + i).val(approval);
}
}
}
// $('#IdRequest :radio[group=Approval]').each(function () {
// alert(this.name);
// $(this).change(function () { alert("aa"); });
//
// });
//client side validation
$.validator.setDefaults({
highlight: function (input) {
$(input).addClass("ui-state-highlight");
},
unhighlight: function (input) {
$(input).removeClass("ui-state-highlight");
}
});
$("#requestForm").validate({
submitHandler: function (form) {
$('form input[type=submit]').attr('disabled', 'true').addClass('ui-state-disabled');
form.submit();
}
});
});
</script>