Kendo Grid，Inline update post复选框到服务器并显示脏列

Question

以下代码的作用如下：

1. 没有两次点击（clientTemplate - EditorTemplate）。只有一个模板，这意味着只需单击一下即可选中或取消选中。
2. 在单元格内编辑中保留脏指示符。
3. 当用户试图离开页面或使用寻呼机时提示消息，但网格中有待处理的更改。

我想分享我的解决方案，希望它可以帮助别人。

function checkItem(ele) {
    var checkBox = $(ele);
    var checked = checkBox.is(':checked');
    var grid = $('#Grid').data().kendoGrid;           
    var cell = checkBox.closest('td');
    var dataItem = grid.dataItem(checkBox.closest('tr'));           
    if (checked !== dataItem.Active && cell.hasClass("k-dirty-cell")) {

        cell.find("span").first().remove();
        cell.removeClass("k-dirty-cell");
        dataItem.Active = checked;
        dataItem.dirty = false; 

    } else if (checked !== dataItem.Active && !cell.hasClass("k-dirty-cell")) {

        cell.addClass("k-dirty-cell");
        cell.prepend("<span class='k-dirty'></span>");
        dataItem.Active = checked;
        dataItem.dirty = true;             
    }          
}

function checkAll(ele) {
    var state = $(ele).is(':checked');
    var grid = $('#Grid').data().kendoGrid;
    var rows = grid.tbody.find("tr");
    $.each(rows, function () {
        var dataItem = grid.dataItem(this);
        var cell;               
        if (dataItem['Active'] != state) {                                       
            cell = $(this).find("input").closest("td");
            if (cell.hasClass("k-dirty-cell")) {
                cell.removeClass("k-dirty-cell");
                cell.find("span").first().remove();
                cell.find("input").prop("checked", state);
                dataItem.Active = state;
                dataItem.dirty = false; // This is a must                 
            } else {
                cell.addClass("k-dirty-cell");
                cell.prepend("<span class='k-dirty'></span>");
                cell.find("input").prop("checked", state);
                dataItem.Active = state;
                dataItem.dirty = true;             
            }
        }
    });
}


function RefreshGrid() {
  $('#Grid').data('kendoGrid').dataSource.read();
}

///
/// This portion of the code displays a message on the screen when the user had a dirty cell but trying to leave the screen.  
///
var eMessage = "<font style='color:red;font-family:Roboto;font-size:16px;font-weight:500;'>"
                        + "You have changes that haven't been saved."
                      + "</font>"
                          + "<br/>"
                          + "<font style='margin-bottom:10px;font-family:Roboto;font-size:14px;font-weight:500;'>"
                          + "<br />"
                          + "Click "
                          + "<b>'OK'</b> to proceed without saving your changes."
                          + "<br /> Else, click <b>'Cancel'</b> and save your changes before proceeding to another page."
                      + "</font>";                   

$('ul > li > a').click(function () {
  var grid = $("#Grid").data("kendoGrid");
  var hasChanges = grid.dataSource.hasChanges();
  var href = this.href;
  if (hasChanges) {
    alertify.confirm(eMessage, function (e) {
      // redirect to requested page.
      if (e) {                        
        window.location.href = href;
      }
    });
    return false;
  }
});

$('[data-role="pager"] ul').on("click", "li", function (e) {
  var grid = $("#Grid").data("kendoGrid");
  var hasChanges = grid.dataSource.hasChanges();
  var pageIndex = $(this).text();
  if (hasChanges) {
    alertify.confirm(eMessage, function (e) {
      if (e) {
        grid.dataSource.page(pageIndex);
      }
    });
    return false;
  }
})



@(Html.Kendo().Grid<Model>()
  .Name("Grid")
  .Columns(c =>
  {                            
  c.Template(@<text></text>).ClientTemplate("<center><input onclick='checkItem(this);' type='checkbox' #= Active ? 'checked': '' # /></center>").HeaderTemplate("<center><input type='checkbox' onclick='checkAll(this);' /> Active</center>").Width(20);
  })
  .ToolBar(toolbar =>
  {
  toolbar.Save();
  })
  .Editable(editable => editable.Mode(GridEditMode.InCell))
  .Pageable(paging => paging.Enabled(true).Info(true).PageSizes(false).Refresh(true))
  .Sortable()
  .Navigatable()
  .DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .PageSize(15)
    .Model(model =>
    {
      model.Id(p => p.ID);
      model.Field(p => p.Active);
    })
    .PageSize(15)
    .Read(read => read.Action("Method Name", "Controller Name").Data("getFilters"))
    .Update(update => update.Action("Method Name", "Controller Name"))
    .Events(events => events.Sync("RefreshGrid"))
    )
  .Pageable(pager => pager.PageSizes(new int[] { 15, 30, 45, 60 }))
  .HtmlAttributes(new { style = "height:550px;" })
)