当有多个子行时，如何响应复选框单击更新分层网格的父行？

Question

Kendo UI MVC
已经实施了分层网格，现在需要响应子行内复选框上的事件。我见过使用 "next tr" 的示例，但是如果子网格有多于一行并且我正在响应子网格第二行上的事件，这是否仍然适用？

在列的 ClientTemplate 中，我想调用一个 javascript 函数，但我需要传递对复选框所在的当前行的引用。我用什么来传递。

例如。我需要传递对具有复选框的当前行的引用作为 applyLedger javascript 函数的参数。如何获取对模板中行的引用？或者，我是不是在艰难地解决这个问题，也许应该考虑使用不同类型的 kendo 对象？

            columns.Bound(order => order.Enabled).Title("Apply").HtmlAttributes(new { style = "text-align:center;" }).ClientTemplate("<input id='applyWarehouse' type='checkbox' onclick='applyLedger(this, #= OrderID #, \"\#= OrderNumber\#\");' class='chkbx' \#= Enabled ? checked='checked' : '' \# />").Width(5);

[更新]

阅读下面 Joe 的回复后，以下是我如何抓取包含复选框所在行的 PARENT 网格的父行。

                    function applyLedger(e) {
  var tr = $(e).closest("tr"); // get the row containing the checkbox
  var data = $("#my-grid").data("kendoGrid").dataItem(tr); // get the data model
  // do business stuff using data ...

  // get parent row of detail grid
  var parentRow = tr.closest("tr");
  var parentRowData = $("#my-parent-grid").data("kendoGrid").dataItem(parentRow);
}

Answer 1

你快到了；我认为只要您可以获得对在事件处理程序中引发点击事件的控件的引用，最简单的方法始终是使用 jquery 攀登 DOM 并找到您的 tr从函数内部，而不是尝试从外部传递该知识。

由于您将 this 作为第一个参数传递给 applyLedger，点击处理程序中的上下文应该是您的复选框，在这种情况下定位 tr 应该很简单:

function applyLedger(e) {
  var tr = $(e).closest("tr"); // get the row containing the checkbox
  var data = $("#my-grid").data("kendoGrid").dataItem(tr); // get the data model
  // do business stuff using data ...
}

请注意查询与网格行关联的 data 模型的网格的代码，这使得无需传递各种属性。所以您的 MVC 代码也可以简化：

.ClientTemplate("<input id='applyWarehouse' type='checkbox' onclick='applyLedger(this);' class='chkbx' \#= Enabled ? checked='checked' : '' \# />").Width(5);

顺便说一句，您可能还应该从复选框模板中删除 id，因为这在您的页面上应该是唯一的；考虑改用 name。

希望对您有所帮助。

当有多个子行时，如何响应复选框单击更新分层网格的父行？

How to update parent row of hierarchical grid in response to checkbox click when there are more than one child row?

jquery

kendo-ui

kendo-grid

kendo-asp.net-mvc