剣道グリッドチェックボックスを再び有効にする方法は？

以下のコードは、アプリケーションのサンプルです。理由フィールドにデータがある場合、グリッドのチェックボックスは「無効」に設定されます。グリッドは、ユーザーが編集できるようにします。データを編集した後にチェックボックスを有効にする方法はありますか？剣道グリッドチェックボックスを再び有効にする方法は？

出力：インライン編集後

|   | Remark  | Center align | 
|:---------|------------:|:------------:| 
| [Unable] |  Invalid |  test1 | 
| [enable] |    |  test2 | 
| [enable] |    |  test3 |

：

|   | Remark  | Center align | 
|:---------|------------:|:------------:| 
| [enable] |    |  test1 | 
| [enable] |    |  test2 | 
| [enable] |    |  test3 |

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

 
    var grid = $("#importgrid").kendoGrid({ 
 
     columns: [ 
 
      { 
 
       field: "", 
 
       width: "40px", 
 
       template: "<input name='Discontinued' class='checkbox' #= (reason.length > 0)? 'disabled=disabled' : ''# type='checkbox' />" 
 
      }, 
 
      { 
 
       field: "reason", 
 
       title: "Remark" 
 
      }, 
 
      { 
 
       field: "UserName", 
 
       title: "User Name" 
 
      }, 
 
       ], 
 
     dataSource: { 
 
      data: userRecord 
 
     }, 
 
     editable: true, 
 
     dataBound: function (e) { 
 
      $(".checkbox").bind("change", function (e) { 
 
       var grid = $("#importgrid").data("kendoGrid"); 
 
       var row = $(e.target).closest("tr"); 
 
       row.toggleClass("k-state-selected"); 
 
       data.push(grid.dataItem(row)); 
 
      }); 
 
     } 
 
    }); 
 

 
    $("#get").on("click", function() { 
 
     for (var i = 0; i < data.length; i++) { 
 
      $("#importgrid").find("tr[data-uid='" + data[i].uid + "'] td:eq(1)").text("success"); 
 
     } 
 
    })

<!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="importgrid" class="usermgrgrid"></div> 
 

 

 
<button class="k-button k-primary" id="get">Submit</button> 
 
</body> 
 

 
</html>

出典

2016-11-18 Austin Hoh

あなたは剣道-UIグリッドの保存イベントを使って、このことを達成することができます。詳細については、下記のコードスニペットをご確認ください。

var grid = $("#importgrid").kendoGrid({ 
    columns: [ 
     { 
      field: "", 
      width: "40px", 
      template: "<input name='Discontinued' class='checkbox' #= (reason.length > 0)? 'disabled=disabled' : ''# type='checkbox' />" 
     }, 
     { 
      field: "reason", 
      title: "Remark" 
     }, 
     { 
      field: "UserName", 
      title: "User Name" 
     }, 
    ], 
    dataSource: { 
     data: userRecord 
    }, 
    editable: true, 
    save: function (e) { 
     if (e.values.reason != undefined && e.values.reason == '') { 
      $('tr[data-uid="' + e.model.uid + '"] ').find("input[type='checkbox']").prop('disabled', false); 
     } 
    }, 
    dataBound: function (e) { 
     $(".checkbox").bind("change", function (e) { 
      var grid = $("#importgrid").data("kendoGrid"); 
      var row = $(e.target).closest("tr"); 
      row.toggleClass("k-state-selected"); 
      data.push(grid.dataItem(row)); 
     }); 
    } 
});

懸念があれば教えてください。

出典

2016-11-18 10:22:35

保存機能を追加した後、これは私の[コード]（http://jsbin.com/hucahumepu/edit?html,js,output）です。これはデータを手動で編集するときにトリガーとなりますが、を選択し、送信ボタンを押すと、成功のステータスが理由フィールドに追加されますが、チェックボックスは使用できません。それを解決する方法はありますか？ –

剣道グリッドチェックボックスを再び有効にする方法は？

答えて

関連する問題