如何将jquery更改事件添加到网格内的单选按钮

我有两个单选按钮 - Telerik MVC网格中的批准和拒绝，也在它们上应用了jquery buttonset（）。我需要检查每行上的哪个单选按钮。试图在jQuery变化事件上做到这一点，但它并没有启动。任何想法？如何将jquery更改事件添加到网格内的单选按钮

<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>

来源

2012-08-09 user1586152

网格绑定在onDocumentReady之后。所以你需要使用特殊的Telerik网格事件OnRowBound。使用.ClientEvents(c=>c.OnRowBound("bindGridRow")) 其中bindGridRow将绑定onchange事件的函数绑定到单行中的单选按钮。

来源

2012-08-10 06:19:53

这指出我的onEdit活动的正确方向。谢谢 – Matt 2012-12-12 13:00:43

您可以使用电网的onload事件绑定change事件处理：

.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'); 
}

来源

2012-08-10 08:42:03 Rustam

感谢您快速反应Kirill Bestemyanov和Rustam。试过OnRowBound（）和OnLoad（）事件都不适合我。所以使用jQuery进行工作。 – user1586152 2012-08-10 16:00:27

使用此jQuery代码 -

 <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>

来源

2012-08-10 16:03:40 user1586152

如何将jquery更改事件添加到网格内的单选按钮

回答

相关问题