2016-11-11 4 views
0

코드 스 니펫에 그리드의 예가 있는데, 발언에 잘못된 값이있는 경우 그리드의 확인란을 선택하지 못합니다. 아래 코드에는 3 개의 샘플 레코드가 있습니다. 출력 : 첫 번째 및 세 번째 확인란을 사용 안 함으로 설정하면 두 번째 확인란이 선택되어 사용자가 선택할 수 있습니다. #= (reason=='')? 'disabled=disabled' : ''#검도 그리드 확인란을 사용할 수 없습니까?

난 당신이 불가능 첫 번째와 세 번째 것인지 잘 모르겠습니다 또는 비활성화 가운데 하나를 원하지만 난 당신이 아이디어를 가지고 생각 :

var userRecord=[{reason:"Invalid",UserName:"test"}, 
 
       {reason:"",UserName:"test1"}, 
 
       {reason:"Invalid2",UserName:"test2"}] 
 

 
var grid=$("#grid").kendoGrid({ 
 
       columns: [ 
 
       { field: "", width: "40px", template: "<input name='Discontinued' class='checkbox' type='checkbox' />" }, 
 
       { field: "reason", title: "Remark" }, 
 
       { field: "UserName", title: "User Name" }, 
 

 

 
       ], 
 
    dataSource: { 
 
     data: userRecord 
 
    }, 
 
     dataBound: function (e) { 
 
     $(".checkbox").bind("change", function (e) { 
 
      var grid = $("#grid").data("kendoGrid"); 
 
      var row = $(e.target).closest("tr"); 
 
      row.toggleClass("k-state-selected"); 
 
      var data = grid.dataItem(row); 
 
     }); 
 
     } 
 
});
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.mobile.min.css" /> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> 
 

 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div id="grid"></div> 
 
</body> 
 
</html>

답변

2

이 같은 것을보십시오.

var userRecord=[{reason:"Invalid",UserName:"test"}, 
 
       {reason:"",UserName:"test1"}, 
 
       {reason:"Invalid2",UserName:"test2"}] 
 

 
var grid=$("#grid").kendoGrid({ 
 
       columns: [ 
 
       { field: "", width: "40px", template: "<input name='Discontinued' class='checkbox' #= (reason=='')? 'disabled=disabled' : ''# type='checkbox' />" }, 
 
       { field: "reason", title: "Remark" }, 
 
       { field: "UserName", title: "User Name" }, 
 

 

 
       ], 
 
    dataSource: { 
 
     data: userRecord 
 
    }, 
 
     dataBound: function (e) { 
 
     $(".checkbox").bind("change", function (e) { 
 
      var grid = $("#grid").data("kendoGrid"); 
 
      var row = $(e.target).closest("tr"); 
 
      row.toggleClass("k-state-selected"); 
 
      var data = grid.dataItem(row); 
 
     }); 
 
     } 
 
});
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.mobile.min.css" /> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> 
 

 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div id="grid"></div> 
 
</body> 
 
</html>