【发布时间】：2021-07-01 08:55:09
【问题描述】：
我创建了一个与我的情况类似的demo。在主网格上检查时我想要实现的目标是，详细信息网格将展开，其中的所有复选框都将被选中，并且子网格也被选中。
可以在不使用复选框的列模板的情况下执行此操作。 DEMO IN DOJO
p/s：我找到了一个 similar 演示，但这个使用 column.template 作为复选框。
【问题讨论】：
标签： javascript jquery kendo-ui kendo-grid
【发布时间】：2021-07-01 08:55:09
【问题描述】：
此示例代码（基于您的示例代码）满足您的要求，即...
当在主网格上选中时，我想要实现的目标是，详细信息网格将展开，其中的所有复选框都将被选中，并且子网格也会被选中。
在 Telerik DOJO 中试试这个。我们需要等待 Kendo 完成展开详细信息行（确保所有 HTML 元素都已完全构建），因此 detailExpand 中的 setTimeout。根据您的需要更改延迟。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo Grid Master Detail Checkbox</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
detailExpand: function(e) {
var $checkbox = $(e.masterRow.context);
if ($checkbox.is(":checked")) {
setTimeout(function() {
e.detailRow.find("tbody tr").each(function() {
var $row = $(this);
$row.find(".k-checkbox").each(function() {
var $checkbox = $(this);
$checkbox.attr("checked", true);
});
$(this).addClass("k-state-selected");
});
}, 250);
}
},
columns: [
{ selectable: true, width: 50 },
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
}).data("kendoGrid");
grid.tbody.on("click", ".k-master-row .k-checkbox", function(e) {
var $checkbox = $(this);
if ($checkbox.is(":checked")) {
var $tr = $checkbox.closest("tr");
var $a = $tr.find(".k-hierarchy-cell a.k-icon");
if ($a.length) {
if ($a.hasClass("k-i-expand")) {
grid.expandRow($tr);
}
}
}
});
});
function detailInit(e) {
var detailgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: {
field: "EmployeeID",
operator: "eq",
value: e.data.EmployeeID
}
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ selectable: true, width: 50, headerTemplate: ' '},
{
field: "OrderID",
width: "110px"
},
{
field: "ShipCountry",
title: "Ship Country",
width: "110px"
},
{
field: "ShipAddress",
title: "Ship Address"
},
{
field: "ShipName",
title: "Ship Name",
width: "300px"
}
]
}).data("kendoGrid");
}
</script>
</div>
</body>
</html>【讨论】：
-
主复选框被选中时网格展开，但其下的子记录未被选中。
-
这是我的新updated.。问题我们能否确保网格在加载时首先折叠并在单击主复选框时展开。
-
@dontbannedmeagain 正如所解释的，也许您需要稍微增加超时时间。嵌套网格可能未完全构建，因此未找到详细信息行。
我根据您提供的第二个 sn-p 调整了您的第一个 sn-p。查看this revised demo。
基本上，您需要调用getKendoGrid() 并将其返回值（实际网格）分配给grid 变量。
之后，添加change 事件侦听器，如您提供的第二个演示 sn-p 所示。
grid.tbody.on("change", ".k-checkbox", function() {
var checkbox = $(this);
var nextRow = checkbox.closest("tr").next();
// Note: the row should be expanded at least once as otherwhise there will be no child grid loaded
if (nextRow.hasClass("k-detail-row")) {
// And toggle the checkboxes
nextRow.find(":checkbox")
.prop("checked", checkbox.is(":checked"));
}
});
另请注意，它不是第二个演示中的.master，而是.k-checkbox，因为您没有在第一列中提供template（第二个演示提供了master）类）。
【讨论】：
-
感谢您回答问题。但似乎它仍然有一个错误。它需要先双击才能选中子网格复选框。并且子网格行没有被选中。
-
@dontbannedmeagain，你点击复选框了吗？这对我有用，就像在你的第二个例子中一样。
-
似乎需要先扩展子网格才能使其发生。这是我的新updated.。问题我们能否确保网格在加载时首先折叠并在我们单击父复选框时展开。