2016-11-11 3 views
0

In dem Code-Snippet ist das Beispiel von Grid, möchte ich das Kontrollkästchen im Raster nicht, wenn die Bemerkung ungültigen Wert haben. Im folgenden Code werden 3 Beispieldatensätze angezeigt. Ausgabe: Die erste und dritte Checkbox gesetzt, nicht möglich, die zweite Checkbox sind aktiviert, um Benutzer zu wählen.wie Kendo Grid Kontrollkästchen deaktivieren?

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>

Antwort

2

so etwas wie dieses Versuchen: #= (reason=='')? 'disabled=disabled' : ''#

Ich bin nicht sicher, wenn Sie erste und dritte deaktiviert oder Sie wollen die mittlere deaktiviert, aber ich glaube, Sie auf die Idee kam.

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>