Kendo grid 在 select master table 时展开 detailinit 并 selected 复选框

Question

我创建了一个与我的情况类似的demo。当在主网格上选中时我想要实现的是，详细信息网格将展开并且其中的所有复选框都将被选中并且子网格也被选中。

不使用复选框的列模板也可以这样做。 DEMO IN DOJO

例如这个屏幕截图。（这个是人工检查的）

p/s：我找到了一个 similar 演示，但是这个使用 column.template 作为复选框。

Answer 1

我根据您提供的第二个片段改编了您的第一个片段。查看 this revised demo。基本上，您需要调用 getKendoGrid() 并将其 return 值（实际网格）分配给 grid 变量。之后，添加 change 事件侦听器，如您提供的第二个演示片段所示。

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 class).

Answer 2

此示例代码（基于您的示例代码）满足了您的要求，即...

What I want to achieve when checked on the master grid, the details grid will expand and all the checkbox inside it will be checked and also the child grid is selected.

在 Telerik DOJO 试试这个。我们需要等待 Kendo 完成详细信息行的扩展（确保所有 HTML 元素都已完全构建），因此 setTimeout 在 detailExpand 中。根据您的需要更改延迟。

<!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>

Kendo grid 在 select master table 时展开 detailinit 并 selected 复选框

Kendo grid make detailinit expand and checkbox selected when select master table

javascript

jquery

kendo-ui

kendo-grid