如何重新啓用劍道網格複選框？

下面的代碼是應用程序的示例。當原因字段中存在數據時，網格中的複選框將設置爲無法使用。網格允許用戶編輯。編輯數據後有沒有辦法啓用複選框？如何重新啓用劍道網格複選框？

輸出：

|   | 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）添加保存功能後，它會觸發和工作時，我手動編輯數據，但如果我檢查一的複選框，然後按提交按鈕，然後將成功狀態添加到原因字段，但不會無法複選框。有沒有辦法解決它？ –

如何重新啓用劍道網格複選框？

回答

相關問題