Как снова включить кендо-сетку?

Код, приведенный ниже, является образцом приложения. Флажок в сетке будет недоступен при наличии данных в поле причины. Сетка позволяет пользователю редактировать. есть ли способ включить этот флажок после редактирования данных?Как снова включить кендо-сетку?

выход:

|   | 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) после добавления функции сохранения. Он будет запускаться и работать, когда я вручную отредактирую данные, но если я проверил один и нажмите кнопку отправки, тогда он добавит статус успеха в поле причины, но не сможет установить флажок. есть ли способ его решить? –

ответ

Смежные вопросы